Web siteye animasyon ekleme animate.css

Merhabalar, websitemizi ziyaret edenlere daha hoş görünmesi için animasyonlar kullanmayı tercih ederiz. Sizlere, animate.css  kütüphanesiyle  en basit şekilde sitemize  nasıl animasyonlar ekleyeceğimizi göstereceğim. Bu kütüphanede 70 küsür tane animasyon var.

Öncelikle eklemeleri jqery ile yapacağız. Animate.css kütüphanesini ben cdn ile çektim. Tek yapmanız gereken aşağıdaki  linklerden birini projenizin head kısmına eklemek.

 

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

 

buda jquery cdni olmayanlar bunuda eklesin.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

 

Bundan sonrası şov. Body etiketleri içinde script etiketimizi açarak  tanımlamamızı yapıyoruz. ready fonksiyonu içine yazarsak sayfa yüklendiğinde yapılacak işlemler anlamına geliyor.

Animasyonlara buradan bakabilirsiniz https://daneden.github.io/animate.css/

Ben card div classima ulaşarak sayfa açılırken sallanan animasyon ekledim örnek olsun diye. Animasyonlarınızı animate den sonra adını yazarak yapabilirsiniz. Diğer fonksiyonda butonların üstüne mause ile gelince hareket eden bir animasyon. Siteden bakıp hoşunuza giden animasyonları kullanabilirsiniz.

<script>
    $( document ).ready(function() {
        $('.card').addClass('animated swing  ');


    });

    $('.btn').mouseover(function(){
        $('.card').addClass('animated jello');

    });
</script>

 

Burada da kütüphanenin github linki https://github.com/daneden/animate.css

Bir cevap yazın