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>