Giriş Yap-- ya da --Kayıt Ol
Giriş
Kayıt

Buralarda Yeni Misin?

Animated CSS Kullanımı || Emre Dolu
Animated CSS Kullanımı
Yazı Numarası22

Bugün sizlere Animated CSS kullanımı hakkında bilgi vereceğim. Sitenizde yazıların özellikle başlıkların güzel animasyonlarla gelmesi göze daha cazip gelecektir. İlk önce animated.css için buradaki siteye giriyoruz. Birbirinden farkı bir çok animasyon barındıran sitede kendinize uygun güzel animasyonlar bulabilirsiniz. Kullanımına gelelim, İlk önce sitemize animated.css kodlarını eklememiz lazım. Bunun için 2 yol var;
 
link rel="stylesheet" type="text/css" href="css/animate.css"
 
Siteden indirdiğimiz dosyayı kök klasörümüze atıyoruz isterseniz css klasörünüzün içine atabilirsiniz. href ile dosya yolumuzu gösteriyoruz.
 
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax /libs/animate.css/3.5.2/animate.min.css"
 
2.yol ise dosyayı indirmeden direkt olarak siteden çekebilirsiniz. Onun içinde yukarıdaki kodu kullanıyoruz.Kullanımı ise şöyle oluyor;
 
ornek animated pulse
 
yazımızın class etiketine gelip sonuna animated "animasyon ismi" eklediğimizde animasyon çalışacaktır. Ancak eğer bu animasyonları böyle kullanırsak sayfa yüklendiğinde direkt olarak animasyonlar çalışır. Eğer kullanıcı fareyle aşağı tarafa indiği zaman tam o noktada animasyonların çalışmasını istiyorsak o zaman wow kullanmamız gerekir. Önce wow scriptini kodumuza ekliyoruz. 
 
     wow = new WOW(
      {
        animateClass: 'animated',
        offset:       100,
        callback:     function(box) {
          console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
        }
      }
    );
    wow.init();
    document.getElementById('moar').onclick = function() {
      var section = document.createElement('section');
      section.className = 'section--purple wow fadeInDown';
      this.parentNode.insertBefore(section, this);
    };
 
Kullanımı ise;
"title wow flipInX" data-wow-delay="0s"                                  
 
İyi günler :)

Yorum Bırakın

Yorum yapmak için lütfen giriş yapınız.

Yazı Videosu Yok

Benzer Yazılar

Haberler için Kaydol!

İletişim Bilgileri
  • Çankaya/Ankara
  • info@emredolu.com