Bazen tasarımcıların aklına ilk başta tuhaf gelen fikirler gelir, ama zamanla bu fikirler size de cazip gelmeye başlar. Ben de tam olarak böyle bir konseptle karşılaştım: Kullanıcı sayfayı kaydırdıkça, sütunlardaki öğelerin zıt yönlerde hareket etmesi gerekiyordu. İlk başta karmaşık gibi görünse de, modern CSS özellikleri sayesinde (özellikle scroll-driven animations) bu efekti uygulamak sandığınızdan çok daha kolay. Hatta yapması oldukça eğlenceli! Bu yazıda, bu efekti nasıl oluşturduğumu adım adım anlatacağım. Siz de farklı bir yaklaşım düşünüyorsanız, paylaşmaktan çekinmeyin.
HTML yapısı oldukça basit. Bir ana kapsayıcı (`.opposing-columns`) ve onun altında üç sütun (`.opposing-column`) bulunuyor. Her sütunun içinde ise `.opposing-item` sınıfına sahip öğeler yer alıyor. Bu kadar basit bir işaretleme ile CSS'in gerisini halletmesini sağlıyoruz. Efektin yalnızca büyük ekranlarda çalışmasını istediğimiz için, medya sorgusu ile ekran genişliği 50rem ve üzeri olduğunda stilleri uyguluyoruz. Ayrıca, `prefers-reduced-motion` ayarına saygı göstererek, hareket hassasiyeti olan kullanıcılar için efekti devre dışı bırakıyoruz.
Efektin sırrı, CSS scroll-driven animations ile birlikte kullandığımız maskeleme tekniğinde yatıyor. Ana kapsayıcının `::before` ve `::after` sözde öğelerine, arka plan rengiyle uyumlu gradyanlar ekleyerek, öğelerin kapsayıcının dışına taştığında yumuşak bir şekilde kaybolmasını sağlıyoruz. Dış sütunlardaki öğeler yukarı, ortadaki sütun ise aşağı doğru hareket ediyor. Bu hareket, scroll-driven animations ile kontrol ediliyor. Her sütun için ayrı ayrı `animation-timeline` ve `animation-range` tanımlayarak, kaydırma ilerledikçe öğelerin zıt yönlerde hareket etmesini sağlıyoruz.
Detaylar ve Etkileri
Sonuç olarak, modern CSS ile daha önce JavaScript veya karmaşık kütüphaneler gerektiren bir efekti, birkaç satır kodla oluşturmak mümkün. Scroll-driven animations, web tasarımcılarına sayfa kaydırma olayını daha yaratıcı ve performanslı bir şekilde kullanma imkanı sunuyor. Bu teknikle, kullanıcı deneyimini zenginleştiren, ilgi çekici ve akıcı animasyonlar tasarlayabilirsiniz. Denemekten çekinmeyin; belki de sizin de aklınızda benzer bir fikir vardır!
