Jquery – Wow.js Kullanımı

Wow.js Web sayfalarındaki HTML nesnelerine animate efektleri vererek interaktif bir şekilde açılmasını sağlayan bir css kütüphanesidir. Kullanımıda oldukça basittir. Eklentinin kendi sitesine şuradan ulaşabilirsiniz.

Eklentiyi kullanabilmek için şu iki sayfayı html sayfanızın head etiketleri arasına dahil edin.

<link rel="stylesheet" type="text/css" href="animate/animate.css">
<script type="text/javascript" src="animate/animate.js"></script>
<script>new WOW().init();</script>

Daha sonra html etiketlerine özellik atama kalıyor. Örneğin div etiketi oluşturup animate efekti vermek için şu yapı kullanılır. İlk olarak html nesnesine wow classı atanır. Ardından efektin ismi yazılır.
data-wow-iteration=”1″ özelliği efektin kaç kere tekrarlayacağını
data-wow-duration=”1.2s” özelliği ise efektin süresini belirtir.


<div class="wow flip" data-wow-iteration="1" data-wow-duration="1.2s"></div>

KULLANILABİLECEK EFEKTLER

  • Attention Seekers
    • bounce
    • flash
    • pulse
    • rubberBand
    • shake
    • swing
    • tada
    • wobble
    • jello
  • Bouncing In
    • bounceIn
    • bounceInDown
    • bounceInLeft
    • bounceInRight
    • bounceInUp
  • Bouncing Out
    • bounceOut
    • bounceOutDown
    • bounceOutLeft
    • bounceOutRight
    • bounceOutUp
  • Fading In
    • fadeIn
    • fadeInDown
    • fadeInDownBig
    • fadeInLeft
    • fadeInLeftBig
    • fadeInRight
    • fadeInRightBig
    • fadeInUp
    • fadeInUpBig
  • Fading Out
    • fadeOut
    • fadeOutDown
    • fadeOutDownBig
    • fadeOutLeft
    • fadeOutLeftBig
    • fadeOutRight
    • fadeOutRightBig
    • fadeOutUp
    • fadeOutUpBig
  • Flippers
    • flip
    • flipInX
    • flipInY
    • flipOutX
    • flipOutY
  • Lightspeed
    • lightSpeedIn
    • lightSpeedOut
  • Rotating In
    • rotateIn
    • rotateInDownLeft
    • rotateInDownRight
    • rotateInUpLeft
    • rotateInUpRight
  • Rotating Out
    • rotateOut
    • rotateOutDownLeft
    • rotateOutDownRight
    • rotateOutUpLeft
    • rotateOutUpRight
  • Sliding In
    • slideInUp
    • slideInDown
    • slideInLeft
    • slideInRight
  • Sliding Out
    • slideOutUp
    • slideOutDown
    • slideOutLeft
    • slideOutRight
  • Zoom In
    • zoomIn
    • zoomInDown
    • zoomInLeft
    • zoomInRight
    • zoomInUp
  • Zoom Out
    • zoomOut
    • zoomOutDown
    • zoomOutLeft
    • zoomOutRight
    • zoomOutUp
  • Specials
    • hinge
    • jackInTheBox
    • rollIn
    • rollOut

Efektlerin önizlemelerine şu adresten bakabilirsiniz.

EDIT: BU MAKALENİN YAZILDIĞI ZAMANDA KÜTÜPHANE ÜCRETSİZDİ ANCAK ŞUAN ÜCRETLİ OLMUŞ. O YÜZDEN İNDİRİLEMİYOR. ANCAK BEN DAHA ÖNCELERİ İNDİRİP BİR PROJEMDE KULLANDIĞIM İÇİN KÜTÜPHANEYİ PROJENİN İÇİNDEN AYIKLAYIP YANDEX E YÜKLEDİM. TIKLAYIP İNDİREBİLİRSİNİZ.

Şunlarda Hoşunuza Gidebilir...

2 Responses

  1. arif dedi ki:

    Keşke ücretli olduğunuda belirseniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: