Anasayfa / CSS / Animasyonlu Sayfa Yapımı(Animate.css Kullanımı)

Animasyonlu Sayfa Yapımı(Animate.css Kullanımı)

Animasyonlu Sayfa Yapımı(Animate.css Kullanımı)

HTML sayfalarda animasyonlu bir şekilde gelen yazılar ve butonların yapımı için Animate.CSS kütüphanesi kullanılmaktadır.Bu kütüphane hazır bir animasyon hazırlama kütüphanesidir.Bunun için öncelikle yapılması gerekenler aşağıda adım adım uygulanması gerekir.

Animate-Css
Animate-Css
  1. “animate.css” kütüphanesi projeye dahil edilmelidir.Kütüphaneyi Buradan indirebilirsiniz.
  2. Siteye gidip “Download Animate.css” butonuna indirdiğiniz css kütüphanesini projenize harici stil dosyası olarak dahil edin.
  3. Daha sonra bu kütüphaneyi kullanabilir duruma geleceksiniz.Bundan sonra işimiz classlarla…
  4. İlk etapta neyin animasyonlu bir şekilde gelmesini istiyorsanız o tagın class’ına “animated” yazmanız gerekir.
  5. Daha sonra aynı class sınıfında ikinci olarak yine aynı sitede hangi animasyonu beğendiyseniz o animasyonu class içine dahil etmeniz yeterli olacaktır.ÖR:class=”animated bounceInDown”
  6. Animasyonunuz sayfa yüklendiğinde bir sefere mahsus çalışacaktır.
  7. Siz bunun hep devam etmesini yani sonsuz döngü şeklinde olmasını istiyorsanız class içine “infinite” eklerseniz animasyonunuz durmadan çalışacaktır.
  8. Gelelim kendi class’larımız ile yapabileceklerimize yukarıdaki animasyonu kontrol edebilmek bizim elimizde bunun için yapmamız gereken kendi stil dosyamızı öncelikle html içerisine entegre etmemiz gerekiyor.
  9. Daha sonra istediğimiz animasyonlu tagın içerisine kendi css sınıfımızı dahil edeceğiz bunun için yapabileceklerimize bir bakalım
  10. Animasyonun 5 saniye sonra çalışmasını istiyorsanız: animation-delay:5s ekleriz.
  11. Animasyonun 10 saniye sürmesini istiyorsak :animation-duration:10s ekleriz.
  12. Animasyonun sayfa yüklendiğinde 3 defa çalışmasını istiyorsak:animation-iteration-count:3 yazarız.
  13. Yukarıdaki gibi animasyonu etkileyen komutları bir class içinde toplayarak istediğimiz animasyonlu tagın içine yerleştiririz.

Yukarıdaki adımları takip ettiğinizde sizde animasyonlu bir HTML sayfası yapabildiğinizi göreceksiniz.Aşağıda anlatılan konunun kodları bulunmaktadır.Ayrıca Kodları denemeniz için sayfa sonunda HTML ve CSS dosyası da verilmiştir.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animate CSS kütüphanesi Kullanımı</title>
<link href="animate.css" rel="stylesheet" type="text/css"/>
<style>
.ortala{
margin: 0 auto;
height: 800px;
width: 800px;
}
.h1{
text-align: center;
}
button{
padding: 15px;
background-color: aquamarine;
color: black;
border-radius: 20px;
border-color: aquamarine;
}
.alan{
height: 400px;
width: 800px;
color: white;
background-color: brown;
padding: 30px;
line-height: 130%;
margin-top: 15px;
}
.ekle{
animation-delay: 3s;
animation-duration: 5s;
animation-iteration-count: 2;
}

</style>
</head>
<body>
<div class="ortala">
<h1 class="animated lightSpeedIn h1">Animate CSS konusu ve kullanımı</h1>
<button class="animated fadeInDown h1 ekle">GÖNDER</button>
<div class="alan">
<p class="animated bounceIn">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</div>
</div>
</body>
</html>

Not:Bu animasyonların tıklayınca işlemesini istiyorsanız mutlaka “JQUERY” den yararlanmanız gerekir.
Yukarıdaki kodların HTML ve CSS kodlamasını İndirebilirsiniz.TIKLAYINIZ

Hakkında sas7979

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir