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ınetiketleri arasına dahil edin.

<link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css">
<script type="text/javascript" src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<script>new WOW().init();</script>

Daha sonra html etiketlerine özellik atama kalıyor. Örneğin span 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.

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

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

Efektlerim önizlemelerine şu adresten bakabilirsiniz.

Bir Cevap Yazın

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

%d blogcu bunu beğendi: