Yazı Getir
avatar

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 ekleyin: .box { width: 300px; margin: 100px auto; padding: 40px; background: #2196f3; color: white; ...