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.
<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
<!-- 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>
