Mario Jäckle tarafından geliştirilmiş olan FractionSlider eklentisi site görünümüne önem veren kişiler için kullanılabilecek eşsiz örneklerden biri sanırım. Henüz yeni yapılmış olmasına rağmen bir çok kişi tarafından ilgi görmeyi başarmış ve sanırım bu animasyonlar ile daha da yayılacak gibi görünüyor.
Çoklu animasyon denilince akla birden fazla animasyon örneği gelir elbette ama bu eklentideki çoklu sözü aynı anda birden fazla nesneye farklı şekillerde slide geçişler verebilme özelliğinden bahsediyor. Slaytlar tek bir resmin kayıp yada fade efekti ile solup yerine başka bir resmin gelmesi gibi alışıldık örneklerden değil. Aynı anda birden fazla resim her biri belirli bir bölgeye doğru kayarak slayt işlemini gerçekleştiriyorlar.
Eklenti ile dilediğiniz kadar farklı farklı slide geçişler uyguladığınız gibi dilediğiniz kadar farklı nesnelerede geçişler uygulayabiliyorsunuz. İlk açılışta resimler yerlerine oturduktan sonra ardından tıklanılabilir başlıklar sırasıyla ya sağdan yada soldan kendileri için ayarlanmış olan bölümlere doğru yaklaşıyorlar. Demo örneğinde yok ama bir nesneyede video eklenmiş olsaydı sanırım daha çekici olurdu. O kısmıda artık dilerseniz kendiniz yaparsınız.
Diğer Demolar
?m using this. But in element ??, I can?t set with or element inside it. I use many other element ?div? contain image, h1, h2, span? in ?, but when I set width of div and width of image, it isn?t affect. I don?t know why.
Here is my code:
Try like that :
You can add your div or other elements like image and style class. Or here examine plugin documentation.
I like this slider so much, but my site is WP based, so until now i can’t include this slider to my site. 😀
Do you mind to tell me, what i suppose to do? hehe,
Thank You so much,
For WordPress must have parallax sliders. You can research WordPress parallax sliders or choose a parallax slider smilar Fraction from here http://wordpress.org/plugins/search.php?q=parallax+slider
Oke Thanks Mintik.
Your are welcome Agus.
Hi !!
I’m trying to use your amazing slider, but I’m having some problem, it doesnt want to work…
I followed this: http://jacksbox.de/stuff/jquery-fractionslider/documentation/
Where should I put the
jQuery(window).load(function(){
$(‘.slider’).fractionSlider();
}); ?
I followed exactly what is in that link.
called the .CSS, Jquery, and fractionslider.js. Added the html that is in that link, but nothing happens ;s
Thank you sir!