animate.css Kullanımı - [JQuery + animate.css]

:[/COLOR]
[code]
    <button id="bildirim_ac">Bildirimi Aç</button>
    <div class="bildirim">
      <div class="bildirim_baslik">Bildirim Başlığı<span>&times</span></div>
      <div class="bildirim_icerik">
        Bildirim içeriği
      </div>
    </div>
[/code]
[COLOR="darkorchid"]Kodlar[CSS];[/COLOR]
[code]
[COLOR="DeepSkyBlue"]body[/COLOR]{
  font-family: "verdana";
}
[COLOR="PaleGreen"].bildirim[/COLOR]{
  display: none;
  position: absolute;
  width: 600px;
  left: calc(50% - 300px);
  top:200px;
  background-color: White;
  box-shadow: 0px 2px 3px #d5d5d5;
}
[COLOR="PaleGreen"].bildirim[/COLOR] [COLOR="DeepSkyBlue"]span[/COLOR]{
  position: absolute;
  right: 10px;
  font-size: 22px;
  margin-top: -5px;
  cursor: pointer;
}
[COLOR="PaleGreen"].bildirim_baslik[/COLOR]{
  padding: 15px;
  background-color: #376f6a;
  font-weight: bold;
  color:White;
}
[COLOR="palegreen"].bildirim_icerik[/COLOR]{
  border:1px solid #f5f5f5;
  border-width: 0px 1px 1px 1px;
  padding: 15px;
}
[/code]

Şimdi hangi elemente animasyon eklemek istiyorsanız o elementin sınıfına [COLOR="DeepSkyBlue"]"animate__animated"[/COLOR] sınıfını ekliyoruz. Örneğin ben bildirimin sınıfına ekliyorum

<div class="bildirim [COLOR="DeepSkyBlue"]animate__animated[/COLOR]"></div>

Şimdi aynı elemente [url]https://animate.style/[/url] 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 [COLOR="deepskyblue"]"animate__fadeInDown"[/COLOR] animasyonunu seçtim. Aynı şekilde kapatmak için de [COLOR="deepskyblue"]"animate__fadeOutUp"[/COLOR] animasyonunu seçtim. Çıkış animasyonları exits olanlardır.

[img]https://i.hizliresim.com/C0dYKb.png[/img]

Şimdi JQuery kullanarak bildirim sistemini tıklama olayına göre ayarlamamız gerekiyor. Bunu şu şekilde yapıyoruz. Öncelikle bildirim elementine "[COLOR="Wheat"]display:none[/COLOR]" verelim ki sayfa yüklendiğinde gözükmesin. Daha sonra JQuery dosyamızda bir tıklama olayı oluşturuyoruz;
[code]
[COLOR="Silver"][COLOR="DarkOrchid"]$[/COLOR]('[COLOR="deepskyblue"]body[/COLOR]').on('[COLOR="Lime"]click[/COLOR]', '[COLOR="DeepSkyBlue"]#bildirim_ac[/COLOR]', function() {
    [COLOR="Gray"]// kodlarımız buraya gelecek[/COLOR]
});[/COLOR]
[/code]
Bildirim açmak için kullanacağımız butonun tıklanma olayına bu kodları ekliyoruz;
[code]
[COLOR="Silver"][COLOR="DarkOrchid"]$[/COLOR]("[COLOR="mediumturquoise"].bildirim[/COLOR]").[COLOR="deepskyblue"]removeClass[/COLOR]("animate__fadeOutUp"); [COLOR="Gray"]// daha önceden kapanma animasyonu verildiyse siliyoruz[/COLOR]
[COLOR="darkorchid"]$[/COLOR]("[COLOR="MediumTurquoise"].bildirim[/COLOR]").[COLOR="deepskyblue"]show[/COLOR](); [COLOR="gray"]// display:none yaparak kapattığımız elementi tekrar gösteriyoruz[/COLOR]
[COLOR="darkorchid"]$[/COLOR]("[COLOR="mediumturquoise"].bildirim[/COLOR]").[COLOR="DeepSkyBlue"]addClass[/COLOR]("animate__fadeInDown"); [COLOR="gray"]// Açılış animasyonu sınıfını elementimizin sınıfına ekliyoruz[/COLOR][/COLOR]
[/code]

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 [COLOR="Purple"]Click Event[/COLOR] oluşturuyoruz;
[code]
[COLOR="Silver"][COLOR="DarkOrchid"]$[/COLOR]('[COLOR="MediumTurquoise"].bildirim_baslik[/COLOR]').on('[COLOR="Lime"]click[/COLOR]', '[COLOR="MediumTurquoise"]span[/COLOR]', function() {
    [COLOR="gray"]// kodlarımız buraya gelecek   [/COLOR]
});[/COLOR]
[/code]
İçerisine elementimize sınıf eklemek için kodlarımızı yazıyoruz;
[code]
[COLOR="Silver"][COLOR="darkorchid"]$[/COLOR]("[COLOR="MediumTurquoise"].bildirim[/COLOR]").[COLOR="deepskyblue"]removeClass[/COLOR]("animate__fadeInDown"); [COLOR="gray"]// açılış animasyonunun sınıfını kaldırıyoruz[/COLOR]
[COLOR="darkorchid"]$[/COLOR]("[COLOR="mediumturquoise"].bildirim[/COLOR]").[COLOR="DeepSkyBlue"]addClass[/COLOR]("animate__fadeOutUp"); [COLOR="gray"]// kapanış animasyonunun sınıfını ekliyoruz[/COLOR][/COLOR]
[/code]

Bu kadar. Animasyon sistemi çalışıyor olacaktır.

[IMG]https://i.hizliresim.com/4dKDtQ.png[/IMG]

Eğer yapamadıysanız kaynak kodlarını inceleyebilirsiniz;
[URL="https://www.dosya.tc/server30/hi3qub/animate-css.rar.html"][B][COLOR="Purple"]Dosya[/COLOR][/B][/URL]
[URL="https://www.virustotal.com/gui/file/a2c4a1aac936d4da1c4db60e54909035042a48e80f1d89f14e355efd7cece05c/detection"][COLOR="Lime"][B]VirusTotal[/B][/COLOR][/URL]

[IMG]https://i.hizliresim.com/CckryH.gif[/IMG]

[/B][/COLOR][/CENTER]

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