Adipoli.js

0
270
Görüntülenme

adipoli
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 : 

 Javascript :

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

Html :

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 :

Örnek Html :

 

StartEffect için kullanılabilecek fonksiyonlar

  1. transparent
  2. normal
  3. overlay
  4. grayscale

HoverEffect için kullanılabilecek fonksiyonlar

  1. normal
  2. popout
  3. sliceDown
  4. sliceDownLeft
  5. sliceUp
  6. sliceUpLeft
  7. sliceUpRandom
  8. sliceUpDown
  9. sliceUpDownLeft
  10. fold
  11. foldLeft
  12. boxRandom
  13. boxRain
  14. boxRainReverse
  15. boxRainGrow
  16. boxRainGrowReverse

 

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Önceki İçerikFlowPlayer
Sonraki İçerikThemify
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş