Lake.js

42Okunma
3 yorum

Lake.js

Web sitenizdeki resimlere su dalgası efekti vermeniz için yapılmış ve kullanımı süper kolay olan bir animasyon örneği. Resme sadece dalgalanma efekti vermek ile kalmayıp fotoğrafı ters düz edebilme özelliği de bulunuyor. İstediğiniz herhangi bir  bölümde kolaylıkla kullanabilirsiniz. Sadece bu uygulamayı kullanarak çok güzel bannerler de yapabilirsiniz. Lake.js ile  yansıma ve dalga efekti vermek istediğiniz  fotoğrafı önce div id=”lakes”></div> alanı içine eklemeniz gerek ve fotoğraf adresinin yani src adresinin idesini de id=”lake-img” olarak girmeniz gerekiyor. Örnek : <img id=”lake-img” src=”resim.jpg” style=”display: none;”/> şeklinde  yapmalısınız.

Herhangi bir düzenleme aracına (photoshop, photoscape vs.) ihtiyacınız  yok. Javascript kodlar bölümünde scale (büyütme), speed (hız), waves (akım) kelimelerinin yanındaki rakamlarlı değiştirerek kendinize  göre değişik hızlar da uygulayabilmeniz mümkün. Akım hızları ve boyutları sabit değildir. Eklediğim demoda biraz büyük ve yavaş hızlı hareket ediyormiş gibime geliyor. Siz kendinize  göre düzenleyerek daha gerçekçi örnekler hazırlarsınız artık.

Kullanım

  • Head etiketleri arasına eklenmesi gereken bölümler.

jQuery ve Lake eklentisinin url adresleri : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="lake.js"></script>

 JavaScript : 

    <script type="text/javascript">
      $(function() {
        $('#lake-img').lake({
          'waves': 6,
          'scale': 0.5
        });

        $('#lake-img2').lake();

        $('#lake-img3').lake({
          'speed': 1.5,
          'scale': 1.5
        });
      });
    </script>

 Css : 

    <style type="text/css">
      #lakes { overflow: hidden; }
    </style>
  •  Body etiketleri arasına eklenmesi gereken bölüm.

Html : 

<div id="lakes">
    <img id="lake-img" src="lake.jpg" style="display: none;"/>
</div>

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-20 tarihinde yayınlandı,Toplam 1614 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(3 yorum)
Yükleniyor...
şirine Yorumcu LV.1
2021-04-25 01:05:03 回 Yanıtla

Ggod konu çok hoş ve güzel olmuş, teşekkürler

omegla Yorumcu LV.1
2021-04-25 01:06:06 回 Yanıtla

Güzel bir konu dikakt çekti