Sayfa Kaydırıldıkça Yukarıdan Görünen Kutular Nasıl Yapılır? (HTML, CSS, JavaScript ile Adım Adım)
Web sitelerinde kullanıcı deneyimini artırmak için görsel geçişler ve animasyonlar oldukça önemlidir. Sayfa aşağı kaydırıldıkça içeriklerin yavaşça yukarıdan belirerek görünmesi, hem profesyonel bir hava katar hem de kullanıcıyı içerikte tutar. Bu tür animasyonlar özellikle:
- Blog içeriklerinde
- Ürün tanıtım sayfalarında
- Hizmet açıklamalarında
- Referans ya da portfolyo sunumlarında
güçlü bir etki bırakır.
Bu yazıda, sadece HTML, CSS ve saf JavaScript kullanarak scroll (kaydırma) ile yukarıdan belirerek görünen kutular nasıl yapılır, adım adım öğreneceğiz.
🧩 Gerekli Kodlar ve Yapı 1. CSS Kodları (style.css) İlk olarak, kutuların animasyonla görünmesini sağlayacak CSS kodlarını style.css dosyanıza...