Scroll aşağıya indikçe efektli açılan divler / Resimler. – Web bulutu Skip to main content
wow css anlatım ve css animasyon

Scroll aşağıya indikçe efektli açılan divler / Resimler.

Merhaba arkadaşlar, bu yazımda sizlere internet sayfalarında sıkça kullanılan bir efekt sistemini tanıtacağım.
kullanacağımız script kütüphanemizin ismi “animate css” olacak. Animate css tek başına da kullanılan bir sistemdir. Tek kullanıldığı takdirde sayfa yüklediği zaman animasyon oynatılır ve süresi bittiğinde durur, tabi bazı animasyonlar süresiz ve tekrar eden olduğu için onlar devam edecektir. Animate css dosyasının kendi başına kullanımı bence yeterli değildir, Çünkü footer gibi en alt kısımlara verilen efektler sayfa açıldığında aktif olur ve kullanıcıya görünmeden sonlanır. Bu sorunu ortadan kaldırmak için “wow” isimli js dosyamız ile birlikte kullanacağız. Ne işe yarayacak bu wow js? derseniz eğer; Animasyonların sayfanın scroll’u ile bağlantılı bir şekilde çalışmasına yarayacak, yani kullanıcı en alta footer’a indiğinde sizin seçtiğiniz animasyon yeni devreye girecek ve kullanıcıya sunulacak. Öncelik animasyonlar demişken bir göz atalım isterseniz neler kullanabiliyor muşuz?

Şu linke tıklayarak, kullanabileceğiniz animasyonlara bir göz atabilirsiniz. İnanın çok güzel animasyonlar mevcut, ben seçim yaparken oldukça zorlanıyorum 🙂 Hızlı bir şekilde konuya girelim;

Şu dosyamızı indiriyoruz;

TIKLA
Şifre: webbulutu


Rar dosyasını indirdikte sonra, İçindeki iki dosyası çıkarın ve projenizin olduğu yerde istediğiniz bir klasöre atın.

İndex dosyanızın en üstüne head kısmına şu iki kodu ekleyin ve klasör yolunu kendinize göre düzenleyin.

<script src="animate/wow.min.js"></script>
<link rel="stylesheet" type="text/css" href="animate/animate.css">

Sitenizin el altına body etiketinden sonra şu kodları ekleyin;

<script>
    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);
    };
</script>

Evet dosyalarımızı projemize başarılı bir şekilde dahil ettik sıra geldi, Kullanımına :).
Kullanımı projeyi dahil etmekten daha kolay, sadece kullanmak istediğimiz animasyonun adını ve 2 tane class’ı çağırmamız gerek.

Örneğin hemen aşağıdaki paragraf etiketine animasyon vermek istiyorum;

<p class="paragraf">Web bulutu  animate & WOW  js kullanımı</p>

Bir öğeye arada boşluk bırakmak şartıyla birden fazla class eklendiğini daha önce duymuş olmanız lazım, Biz de bu şekilde yapacağız; İlk olarak “wow” class’ımızı, daha sonra ise animasyon adını gireceğiz. Sizlere yazının başında bir link vermiştim, oradan animasyonların isimlerini görebilir ve istediğinizi kullanabilirsiniz, ben rotateIn efektini kullandım bu örnekte. Data-wow-delay ise animasyonun aktif olma hızı olacaktır. 1 saniyenin altında kullanımı da şu şekildedir “500” / “100” gibi…

<p class="paragraf wow rotateIn" data-wow-delay="1s">Web bulutu  animate & WOW  js kullanımı</p>

Bir sonraki yazımda görüşmek üzere 🙂 Web bulutu.

bulut Aylak

Full-stack web developer, Search engine optimization meraklısı, çakma filozof ve blogger.

Scroll aşağıya indikçe efektli açılan divler / Resimler.” hakkında 7 yorum

  1. Merhabalar. Yazı için teşekkür ederim.

    bounceInLeft efektini kullanıyorum. Ama sayfaya soldan geliyor nesnem. Fakat sayfanın neresine kadar geleceğini nasıl ayarlarım?

    1. Nesne, efekt kullanılmadan neredeyse bitiş noktası da orası oluyor malesef. Sayfanın neresine kadar geleceği kısmını, efekt kullanmadan ayarlamanız gerekmekte.

  2. sitenize stackoverflow tarzı codepen veya diğer online editörlerin bir iframe’i olsa ve ve kod önizlenebilse daha güzel olur çünkü aradığım kod bu mu anlamak sadece kodu elimdeki veriye dahil ederek mümkün oluyo ve bu olabildiğince zahmetli ve elimdeki kaynaktan kayıp verme olasılığı doğuruyor. tavsiyemi dikkate alacağınızı umarak şimdiden teşekkür ederim..

Bir Cevap Yazın

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