Duyarlı Animasyonlu Giriş Sayfası Yapma

Bu makalede animate.css ile duyarlı çalışan tam sayfa animasyonlu açılış sayfasının nasıl yapıldığını anlatmaya çalışacağım.

Bu arada sayfamızı yaparken Css3 ile animasyon oluşturmayı kolaylaştıran animate.css kütüphanesini de tanıtmış olacağım.

Animate.css kütüphanesi ile ilgili direkt https://github.com/daneden/animate.css sayfasından bilgilere ulaşabilirsiniz.

Animasyonların hepsini görmek ve test etmek için https://daneden.github.io/animate.css/ sayfasına girerek bakabilirsiniz.

Animasyonların nasıl yapıldığına kısaca bilgi vermek gerekirse;

Animate.css i sayfanıza bağladıktan sonra, animasyonu vermek istediğiniz elemente animated class'ını eklemeniz gerekmektedir. Arkasından bir boşluk vererek hangi animasyonu istiyorsanız onu eklemeniz gerekiyor. İşte elementlerimize animasyon eklemek bu kadar basit.

Eğer animasyonunuzun sürekli olarak durmadan devam etmesini istiyorsanız elemente infinite class'ını vermeniz gerekmektedir.

Bu kısa açıklamadan sonra şimdi sayfamızı yapmaya başlayalım.

Kaynak Kodları:İNDİR

Bu konudaki anlatımı görsel olarak aşağıda ki videodan veya youtube kanalımdan takip edebilirsiniz.