Sitenizi Efektler ile Zenginleştirin!

Kimi zaman çok sık denk gelmiş olduğumuz bazı sitelerde efektler sayesinde çok farklılıklar olduğunu görmekteyiz. Kimi zaman bir logodaki efekt olan biten her şeyi bizlere anlatırken kimi zaman yazılara uygulanmış olan efekt gelen müşteriye & ziyaretçiye daha fazla okuma isteği uyandırmaktadır. Sitenize efekt & animasyon eklemek istiyorsanız bunun için sadece bir CSS dosyası ile başarabilirsiniz. Ünlü tasarımcı Daniel Eden tarafından geliştirilmiş olan Animate.css sayesinde sizlerde sitenize efekt & animasyon ekleyebilirsiniz. Bunu nasıl yapılacağını merak ediyorsanız aşağıdaki adımları takip edebilirsiniz.

CSS Dosyasını Sitemize Ekleyelim

Animate.css adresine giderek buradan alt kısımda yer alan Download Animate.css seçeneğine tıklayıp CSS dosyasını indirip bunu sitenizin bulunduğu uygun dizine atınız. Ardından .css dosyasını sitenize entegre ediniz.

İşte bütün işlem bu kadar.

Animate.css dosyasını entegre ettikten sonra sitenizde hangi class’a efekt eklemek istiyorsanız hoşunuza giden veya uygun olan efektin adını ek olarak o class’a eklemeniz yeterli olacaktır.

Örneğin;

Animate.css adresinde yer alan efektlerden benim en çok hoşuma giden efekt, bounceIn efekti. Bunu kendi class’ımda kullanmak istersem aşağıdaki gibi düzenlemem gerekmektedir.

<div class="logo">Yusuf Kalafat</div> <div class="logo animated bounceIn">Yusuf Kalafat</div>

Bu süreçten sonra artık efektimiz logo class’ına eklenmiş olacaktır. Efektlere zaman vermek istiyorsanız bunun için biraz oluşturacağınız JavaScript kodlarıyla yapabilirsiniz.

<script> setTimeout(function () { $('.1').show().addClass('animated fadeInRight');}, 500 ); setTimeout(function () { $('.2').show().addClass('animated fadeInRight');}, 1500 ); setTimeout(function () { $('.3').show().addClass('animated fadeInRight');}, 2250 ); </script>

Üst kısımdaki js kodunu kendinize göre düzenleyebilirsiniz, burada ben span olarak kullanmıştım ve sizlerde kendinize göre düzenleyip sorunsuzca kullanabilirsiniz.