ScrollReveal ile Scroll Animasyonları

ScrollReveal, sayfanızı aşağı doğru kaydırdığınızda, sayfa içindeki elemanların hareketli bir şekilde yerine gelmesini sağlayan bir kütüphane. Sayfayı scroll ettiğinizde, sayfada görünen div’lerin, diğer HTML etiketlerinin ya da class veya ID’lerin animasyonlu bir şekilde görünmesini sağlayan tatlı ve küçük bir script diyebiliriz bunun için. Bunu tek başına bir JS dosyası ile yapar ve ilave başka JS dosyalarına ihtiyaç duymaz.

Öncelikle ScrollReveal scriptini sayfanıza çağırmanız gerekir. ScrollReveal CDN kodunu aşağıda görebilirsiniz. Bu kodu sayfanızın head etiketleri içine yazın. Bu kütüphane birçok tarayıcı tarafından desteklendiği için gönül rahatlığı ile kullanılabilir.

<script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>

Sonrasında ScrollReveal kodunu kullanabiliriz. Örnek olarak aşağıdaki kodu kullanıp bu kod üzerinde ScrollReveal parametrelerini inceleyebiliriz. Öncelikle test için bir HTML kodu oluşturalım.

<div class="header">Sanagrafi</div>

Scriptin çalışlması için de script etiketleri arasına aşağıdaki kodu yazalım. Hiçbir parametre olmadan da kod çalışır. Desteklediği parametreler ile kodu daha da özelleştirebilirsiniz.

ScrollReveal().reveal('.header');

Şimdi animasyon seçeneklerine gelelim. Animasyonun geleceği istikameti, ne kadar sürede, ne kadar uzaklıktan geleceği gibi özellikleri belirlememizi sağlıyor.

Delay: Animayonun gecikme süresini belirler.
Distance: Elemanın ne kadar uzaklıktan geleceğini beilrler.
Duration: Animasyonun tamamlanma sürecini belirler.
Easing: Animasyonun başlangıç ve bitiş hızlarını belirlemek için kullanılır.
Inverval: Sıralı bir listeniz ya da aynı class’a sahip elemanlarınız varsa inverval değerine göre onları görünür yapacaktır. Keyifli bir özellik.
Opacity: Varsayılan değeri 0 olan bu özellik, fade in gibi bir etki bırakıyor. Ama az saydamdan görünsün gibi bir özellik istiyorsanız opacity:0.5 gibi kullanabilirsiniz.
Origin: Nesnenin animasyonunun yönünü belirler.
Rotate: Nesnelere döndürme efekti verir. Kullanımını aşağıdaki örnekte görebilirsiniz.
Scale: Küçükten tam boya dönüşme efektini de bununla sağlıyoruz.

<script type="litespeed/javascript">window.sr=new ScrollReveal()
sr.reveal('.header',{distance:'20px',interval:200,scale:0.85,opacity:0,rotate:{x:2,z:2}});sr.reveal('.footer',{delay:1000})</script>

Birçok geliştirici, JS kodlarını sayfanın sonuna koymayı tercih etmesi bilinen bir durum. Sayfa yüklendikten sonra JS kodlarının okunması, Google gibi hız testine önem verenler için gerekli bir durum. Ancak geliştiricilerin yaptığı bu durum sayfa yüklendikten sonra JS kodlarının çalışmasını sağlıyor ve ScrollReveal kullanan sayfa elemanlarının göz kırpmasına neden oluyor. Bu durumun üstesinden de o elemanı CSS ile gizleyerek gelebiliyoruz. Örneğin header class’ına efekt verdiğinizi düşünürsek, aşağıdaki kod çözüm olabilir.

html.sr .header {
    visibility: hidden;
}

Bu script’e alternatif olarak Wow.js jQuery eklentisi vardır. İhtiyaca göre bunu da kullanabilirsiniz.

Popular Eğitimler

Modern CSS Checkbox (Toggle Switch / Custom Checkbox) Nasıl Yapılır?

Daha önce HTML ile iletişim formları oluşturduysanız ve Check Box’lardan, standart ve…

CSS ile Hareketli Renkli Gradient Arka Plan

CSS ile sayfalarınıza renk katacak birçok şey yapabiliyorsunuz. Hareketli bir şekilde arka…

Chart.js ile Veri Görselleştirme ve Grafik Tabloları

Bazı verileri, gösterge tabloları veya çizelgeler olmadan anlamak çok yorucu olabiliyor. Bu…

Bootstrap Izgara (Grid) Sistemi (Container, Col, Row Kullanımı)

Bootstrap’de ızgara sistemleri container, container-fluid, row ve sütun anlamına gelen col elemanlarından…

Google Fontlarını WOFF Formatında İndirerek Sunucuda Kullanmak

Site hızı optimizasyonu ve performans testlerinde daha yüksek sonuç alabilmek ya da…

Css ile Tam Sayfa Arkaplan Nasıl Yapılır?

CSS ile tam sayfa arkaplan nasıl yapılır? Üstelik bu tam ekran arkaplanın, ekran boyutuna göre otomatik olarak genişleyip daralması da CSS’in arkaplan özelliği ile mümkün.