Ali @mintik
9 Mayıs 2021 13:26

0

Adipoli.js

Hazırladığınız fotoğraf galeri örneklerinde yada kategorilerinizde sıralanmış olan resimlerin üzerine mouse geldiği anda değişik geçiş efektlerinin çalışabilmesi için yapılmış olan bir örnek. Joby Joseph tarafından geliştirilmiş olan Adipoli uygulaması ile sekiz farklı 2D resim efekti kullanabilmeniz mümkün. Her resme farklı farklı hover efektleri uygulayabileceğiniz gibi gruplar halinde de albümler oluşturarak her fotoğraf için aynı hover efektini kullanabilirsiniz.

Kullanım

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

Js ve Css dosya adresleri :

<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>

Javascript :

<script type="text/javascript">
 $(function(){
  $('.resim1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
  });
});
</script>

Body etiketleri arasına eklenmesi gereken bölüm.

Html :

<img class="img-style resim1" src="img/6_1.jpg"/>

Yukarıda verdiğim JavaScript ve resim Html koduna bakarsanız hover efektinin resimlere nasıl sğlandığını daha iyi farkedebilirsiniz. JavaScript içerisinde Hover efekti eklenecek olan nesneye resim1 dedik. Bu işlem iki satırdan oluşuyor ‘startEffect’ görüntünün ilk hali ve ‘hoverEffect’ resmin mouse ile karşılaştıktan sonraki hali.

Hover efektleri eklemek istediğimiz resimlere javascript elementini yerleştirmemiz gerekiyor. Normal bir resim adresi <img src=”img.jpg”/> şeklindedir bunun içine yukarıdaki html kodda olduğu gibi class=”img-style resim1″ eklememiz gerekiyor. Resim1 ilk javascript seçicimiz. Bunu daha da arttırarak her resme farklı farklı efektler sağlayabiliriz.

Örnek JavaScript :

<script type="text/javascript">
 $(function(){
  $('.resim1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
  });
  $('.resim2').adipoli({
    'startEffect' : 'overlay',
    'hoverEffect' : 'sliceDown'
  });
  $('.resim3').adipoli({
   'startEffect' : 'transparent',
   'hoverEffect' : 'boxRandom'
  });
  $('.resim4').adipoli({
   'startEffect' : 'overlay',
   'hoverEffect' : 'foldLeft'
  });
  $('.resim5').adipoli({
    'startEffect' : 'transparent',
    'hoverEffect' : 'boxRainGrowReverse'
  });
  $('.resim6').adipoli({
    'startEffect' : 'greyscale',
    'hoverEffect' : 'normal'
  });
});
</script>

Örnek Html :

     <img class="img-style resim1" src="img/6_1.jpg"/>
     <img class="img-style resim2" src="img/6_2.jpg"/>
     <img class="img-style resim3" src="img/6_3.jpg"/>
     <img class="img-style resim4" src="img/1_1.jpg"/>
     <img class="img-style resim5" src="img/1_2.jpg"/>
     <img class="img-style resim6" src="img/1_3.jpg"/>

StartEffect için kullanılabilecek fonksiyonlar