Giriş Animasyonları (Reveal Effect)

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).

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;
        
        if (elementTop < windowHeight - elementVisible) {
            el.classList.add("active");
        }
    });
}
window.addEventListener("scroll", reveal);

Sıralı Animasyonlar

Yan yana duran kutuların aynı anda değil, küçük gecikmelerle (delay) gelmesi profesyonel bir sonuç verir.

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }