Önyüz geliştiricisinin en büyük ihtiyaçlarından biri kodladığı tasarımının efektif olmasıdır. Bunun için kendini yormasına gerek yok çünkü Animate.css var.
#1
İlk demoda direkt olarak animated.css'i kullandım ve zorunlu olan animated sınıfını ekledim. Sonrasında ise seçtiğim efektlerden slideInRight (sağdan kayarak gel) animasyonunu ekledim.
Ancak sonuç site yüklendiği anda sadece bir defa çalışacak şekilde olduğundan sadece ilk yüklenme anında görülebilir.
http://jsfiddle.net/ahmettalut/mux3dgx6/4/
//animate.css'i eklemeyi unutmayın.
#2
Bu sefer ise jQuery ile sistemi geliştirerek kutuya tıkladığımda efektin çalışmasını sağladım.
Gerekli olan açıklamalar JS kod içi yorumlarda yazmaktadır.
http://jsfiddle.net/ahmettalut/xrse0ya3/
//animate.css'i ve jquery.js'i eklemeyi unutmayın.
<script>
$(".demo1").click(function(){
$(this).addClass("animated bounceIn"); //Sayfayı yenileyene kadar
// demo2 sınıfına animted bounceIn sınıfları ekleniyor bu yüzden
// sadece 1 kez tıklandığında çalışıyor.
});
// Altta ki örnekte ise her üstüne tıkladığınızda animasyonu tekrar gösteriyor.
// Her tıklamadan 0.65 saniye sonra animated bounceIn sınıflarını kutumuzdan siliyoruz.
$(".demo2").click(function(){
var demo2 = $(this);
$(demo2).addClass("animated bounceIn");
setTimeout(function() {
$(demo2).removeClass("animated bounceIn");
}, 650);
});
</script>
#3
Yine jQuery ile bir örnek hazırladım bu örnek sayesinde sitenizde nasıl bir şekilde kullanacağınızı görebilirsiniz.
http://jsfiddle.net/ahmettalut/tqLq0Lfp/
//animate.css'i ve jquery.js'i eklemeyi unutmayın.
Yazıyı Görmek İçin Üstüne Gel
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<script>
$(".demo").hover(function(){
$(".demo h3").addClass("animated bounceOut");
$(".demo p").addClass("animated slideInLeft").show();
},function(){
$(".demo h3").removeClass("bounceOut").addClass("animated bounceIn").show();
$(".demo p").removeClass("animated slideOutLeft").hide();
});
</script>
Github: https://github.com/daneden/animate.css
Kaynak: http://taluttasgiran.com.tr/animate-css-bulunmaz-nimet/