Ana SayfaWeb TasarımScrollReveal ile Scroll Animasyonları

ScrollReveal ile Scroll Animasyonları

YouTube'ta Takip Et →

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/scrollreveal@4.0.0/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>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.rotasenin.com/analytics.js','ga');ga('create','UA-24131974-1','auto');ga('require','GTM-TV9X8PZ');ga('send','pageview');</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.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.