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
--> Scriptler
--> Slider nesnelerini oluşturma
Your content goes here
Your content goes here
Your content goes here
--> Nesneleri hareketlendirme
$(".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"
},
}
}
});
//
