2021 European Technology Winner 2021 European Technology Winner
BLOG
Jquery Animate Slider Yapımı
Web Tasarımı     2019-05-28 09:49:18
Jquery Animate Slider Yapımı


Bu yazımızda animasyonlu slider örnekleri için gerekli kodları bulabilirsiniz. Animate slider ile bir yazı veya nesnenin hareketli biçimde (örn: yandan kayarak, dönerek, zıplayarak.. v.b.) slider’ a gelmesi ve aynı şekilde kaybolması sağlanır bu şekilde web siteniz kullanıcıların daha çok ilgisini çekecektir.Slider’a nesnenin hangi şekilde geleceğini ise kodda biz belirtiriz. Bunun için gerekli kodlar aşağıdadır.




//
--> Stil dosyalarını çağırma 

<link rel="stylesheet" href="css/jquery.animateSlider.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

--> Scriptler

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/jquery.animateSlider.js"></script>

--> Slider nesnelerini oluşturma

<ul class="anim-slider">
   
  <!-- Slide No1 -->
  <li class="anim-slide">
    Your content goes here
  </li>
   
  <!-- Slide No2 -->
  <li class="anim-slide">
   Your content goes here
  </li>
   
  <!-- Slide No3 -->
  <li class="anim-slide">
   Your content goes here
  </li>
   
  <!-- Arrows -->
  <nav class="anim-arrows">
    <span class="anim-arrows-prev">
      <i class="fa fa-angle-left fa-3x"></i>
    </span>
    <span class="anim-arrows-next">
      <i class="fa fa-angle-right fa-3x"></i>
    </span>
  </nav>
   
</ul>

--> Nesneleri hareketlendirme

<script>
$(".anim-slider").animateSlider({
autoplay:  true,  //starts the autoplay
interval:   5000,  //time between slides if autoplay is true
animations  :  //specify the animations for each element of the slide
{
0   :  //Slide No1
{
tagName :  //tagName or id or class name of the element 
{
   show :  "fadeIn",  //class to add when the element appears
   hide :  "fadeOut", //class to add when the element disappears
   delayShow:  "delay1s"   //class to add to delay show effect
},
"#id"   :
{
   show :  "bounceIn",
   hide :  "bounceOut",
   delayShow:  "delay1-5s"
},
".class":
{
   show :  "rotateIn",
   hide :  "rotateOut",
   delayShow:  "delay2s"
}
},
1   :  //Slide No2
{
"#id"   :
{
   show :  "bounceInDown",
   hide :  "bounceOutUp",
   delayShow:  "delay0-5s"
},
tagName :
{
   show :  "slideInLeft",
   hide :  "slideOutRight",
   delayShow:  "delay1s"
},
}
}
});
</script>

//