Yükleme ve Kaydırma Animasyonları Rehberi

Giriş

Bir web sitesinde tüm içeriğin anında görünmesi yerine, sırasıyla ve yumuşak bir hareketle (genellikle aşağıdan yukarıya) ekrana gelmesi, kullanıcıya "premium" bir deneyim sunar. HYZSOFT projelerinde bu etkiyi animate-on-scroll mekanizması ile sağlıyoruz.

Canlı Demo

Aşağıdaki butona bastığınızda animasyonun nasıl tetiklendiğini görebilirsiniz (Normalde bu işlem scroll veya sayfa yüklemesi ile otomatik yapılır).

Kutu 1

Kutu 2 (Gecikmeli)

Kutu 3 (Daha Gecikmeli)

Nasıl Yapılır?

Mantık üç aşamadan oluşur: Başlangıç CSS'i (Görünmez), Bitiş CSS'i (Görünür) ve JS ile kontrol.

1. Başlangıç ve Bitiş CSS'i

/* Başlangıçta elemanı gizle ve aşağı kaydır */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

/* 'active' sınıfı geldiğinde orijinal konumuna döndür */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
            

2. JavaScript ile Tetikleme

Sayfa ilk yüklendiğinde ve scroll yapıldığında elemanın görünürlük alanına girip girmediğini kontrol etmeliyiz.

function reveal() {
    var reveals = document.querySelectorAll(".reveal");
    reveals.forEach(el => {
        var windowHeight = window.innerHeight;
        var elementTop = el.getBoundingClientRect().top;
        var elementVisible = 150; // Görünmesi için geçmesi gereken px
        
        if (elementTop < windowHeight - elementVisible) {
            el.classList.add("active");
        }
    });
}

window.addEventListener("scroll", reveal);
window.addEventListener("load", reveal); // Yüklemede de çalışmalı!
            

Sıralı (Staggered) Animasyonlar

Yan yana duran kutuların aynı anda değil, küçük gecikmelerle (delay) gelmesi çok daha profesyonel bir sonuç verir. Bunun için CSS transition-delay özelliğini kullanırız.