ANİMATE.CSS

animate.css, içerisinde hazır oluşturulmuş sınıflar sayesinde animasyon yapmamıza yardımcı oluyor. Bu sayede sadece elementin sınıfına animate.css sınıflarından eklememiz yeterli oluyor.



KULLANIMI

animate.css'i indirip, dosyamıza eklememiz yeterli.

Dosya



Şimdi örnek bir bildirim tasarımı yapalım. Ben hızlı hızlı bir tane yaptım;

Görüntü:



Kodlar[HTML]:
Kod:
Bildirimi Aç

Bildirim Başlığı&times


Bildirim içeriği




Kodlar[CSS];
Kod:
body{
font-family: "verdana";
}
.bildirim{
display: none;
position: absolute;
width: 600px;
left: calc(50% - 300px);
top:200px;
background-color: White;
box-shadow: 0px 2px 3px #d5d5d5;
}
.bildirim span{
position: absolute;
right: 10px;
font-size: 22px;
margin-top: -5px;
cursor: pointer;
}
.bildirim_baslik{
padding: 15px;
background-color: #376f6a;
font-weight: bold;
color:White;
}
.bildirim_icerik{
border:1px solid #f5f5f5;
border-width: 0px 1px 1px 1px;
padding: 15px;
}
Şimdi hangi elemente animasyon eklemek istiyorsanız o elementin sınıfına "animate__animated" sınıfını ekliyoruz. Örneğin ben bildirimin sınıfına ekliyorum




Şimdi aynı elemente https://animate.style/ sitesine girip, eklemek istediğimiz animasyonu sağdan seçiyoruz. Sitede seçeneklerde animasyonun sağındaki ikona kopyalamak için basın. Örneğin ben açılış için "animate__fadeInDown" animasyonunu seçtim. Aynı şekilde kapatmak için de "animate__fadeOutUp" animasyonunu seçtim. Çıkış animasyonları exits olanlardır.



Şimdi JQuery kullanarak bildirim sistemini tıklama olayına göre ayarlamamız gerekiyor. Bunu şu şekilde yapıyoruz. Öncelikle bildirim elementine "display:none" verelim ki sayfa yüklendiğinde gözükmesin. Daha sonra JQuery dosyamızda bir tıklama olayı oluşturuyoruz;
Kod:
$('body').on('click', '#bildirim_ac', function() {
// kodlarımız buraya gelecek
});
Bildirim açmak için kullanacağımız butonun tıklanma olayına bu kodları ekliyoruz;
Kod:
$(".bildirim").removeClass("animate__fadeOutUp"); // daha önceden kapanma animasyonu verildiyse siliyoruz
$(".bildirim").show(); // display:none yaparak kapattığımız elementi tekrar gösteriyoruz
$(".bildirim").addClass("animate__fadeInDown"); // Açılış animasyonu sınıfını elementimizin sınıfına ekliyoruz
Kodları kaydedip butona bastığınızda bildirimin animasyonlu şekilde geldiğinizi göreceksiniz. Şimdi kapatmak için kullanacağımız tıklama olayını yazalım. Bunun için yine Click Event oluşturuyoruz;
Kod:
$('.bildirim_baslik').on('click', 'span', function() {
// kodlarımız buraya gelecek
});
İçerisine elementimize sınıf eklemek için kodlarımızı yazıyoruz;
Kod:
$(".bildirim").removeClass("animate__fadeInDown"); // açılış animasyonunun sınıfını kaldırıyoruz
$(".bildirim").addClass("animate__fadeOutUp"); // kapanış animasyonunun sınıfını ekliyoruz
Bu kadar. Animasyon sistemi çalışıyor olacaktır.



Eğer yapamadıysanız kaynak kodlarını inceleyebilirsiniz;
Dosya
VirusTotal




İçerik: Animasyonlu sayfa yapımı, animate.css kullanımı, animate.css ile bildirim sistemi yapmak, elemente animasyon vermek.