Animate CSS Nedir?
İnternet sitesini html ve css kodları ile hazırlarken bazen butonlarda veya yazılarda animasyonlara ihtiyaç duyabiliriz.Bu animasyonlar internet sitelerinin olmazsa olmazıdır.Ziyaretçilerin gözüne güzel gözüken bir animasyon yaparak, ziyaretçilerin internet sitenizde daha uzun bir süre kalmasını ve daha sonra tekrar ziyaret etmelerini sağlayabilirsiniz.
Animasyonlar sadece yazılarda ve butonlarda olmayabilir.Tamamen yazılımcının hayal gücüne kalmıştır.Sadece animasyonlar sayesinde internet siteleri de yapabiliriz.Örnek olarak, uzay boşluğunda süzülen bir uzay gemisi veya fare tekerleği ile hareket eden bir adam,araba,uçak,bisiklet vb. şeyler yapabilirsiniz.Yukarıda da dediğim gibi tamamen yazılımcının hayal dünyasına kalmış birşey.Ancak birazdan vereceğim css dökümanında bunları yapmak pek mümkün değil.
Animate.css dökümanını indirmek için gerekli olan internet sitesine buradan ulaşabilirsiniz.
Animasyonlar sadece yazılarda ve butonlarda olmayabilir.Tamamen yazılımcının hayal gücüne kalmıştır.Sadece animasyonlar sayesinde internet siteleri de yapabiliriz.Örnek olarak, uzay boşluğunda süzülen bir uzay gemisi veya fare tekerleği ile hareket eden bir adam,araba,uçak,bisiklet vb. şeyler yapabilirsiniz.Yukarıda da dediğim gibi tamamen yazılımcının hayal dünyasına kalmış birşey.Ancak birazdan vereceğim css dökümanında bunları yapmak pek mümkün değil.
Animate.css dökümanını indirmek için gerekli olan internet sitesine buradan ulaşabilirsiniz.
İnternet sitesine girdiğiniz taktirde, yukarıdaki resimde görmüş olduğunuz bir ekran sizi karşılayacak .
(Kırmızı çerçeveler ve 1,2,3,4 sayıları haricinde)
Sayılarla belirtmemin sebebi ise siz okuyucularımıza daha rahat bir şekilde anlatmak istememden dolayıdır.O zaman siteye bir göz atalım.Resimde de gördüğünüz gibi "1" ile yazılan yere tıkladığınız taktirde sizi açılan bir pencere karşılayacak.Açılan pencerede dilediğiniz yazıya tıklayarak bütün animasyonları teker teker deneyebilirsiniz.Aralarından herhangi bir animasyonu beğendiğinizi varsayarak yazıya devam ediyorum."2" ile belirttiğim dikdörtgene yani "Animate it" yazısına tıklayarak yan tarafta seçtiğiniz animasyonun, nasıl bir animasyon olduğunu görebilirsiniz.İstediğiniz gibi 1. karede seçtiğiniz animasyonu değiştirebilirsiniz.Tekrar tekrar deneyerek Animate.css'de hangi css'ler olduğunu görebilirsiniz.Animasyonlara teker teker göz gezdirdiniz ve hoşunuza gitti diye düşünürek yazıma tekrar devam ediyorum."3" ile belirttiğim dikdörtgene yani "Download Animate.css" yazısına tıkladığınız zaman Animate.css dökümanını indirebilirsiniz.İndirdiğiniz taktirde html dosyanızı açarak "<head>" tagları arasına css dökümanını ekleyebilirsiniz.
"4" ile belirttiğim dikdörtgene yani "View on Github" yazısına tıklayarak aşağıda ki resim ile birebir aynı sayfa göreceksiniz.
Görmüş olduğunuz resimde metin belgelerini göreceksiniz.Dilediğiniz gibi bunları açarak kontrol edebilirsiniz.
Animate.css dosyasını indirdiniz ve html dosyanıza eklediniz.Peki nasıl kullanacağım?
Dediğim gibi animate.css hazır css dökümanı olduğu için kullanımı çok basittir.Örnek verecek olursak, bir "h1" tagını ele alalım.İşimiz sadece "h1"e sınıf(class) vermek.Aşağıda bir örnek yazım bulunmakta:
<h1 class="animated infinite bounce">Örnek Başlık</h1>
Sondaki "bounce" yazısı animayonumuzun sınıfıdır.Dilediğiniz taktirde değiştirebilirsiniz.
Başka makalelerde görüşmek üzere hoşçakalın.
Hiç yorum yok: