Tasarımcıların bazen aklına ilk başta tuhaf gelen fikirler gelir, zamanla bu fikirler size de cazip gelmeye başlar. İşte böyle bir konsepti hayata geçirmek için yola çıktım: Kullanıcı sayfayı kaydırdıkça sütunlardaki öğelerin zıt yönlerde hareket etmesi. İlk bakışta zor gibi görünse de modern CSS özellikleri, özellikle scroll-driven animations sayesinde bu efekti uygulamak sandığınızdan çok daha kolay. Üstelik yapması oldukça keyifli! Ben nasıl yaklaştığımı anlatayım, belki siz de farklı bir yöntem paylaşmak istersiniz.
HTML yapısı oldukça basit: Bir üst öğe (.opposing-columns) içinde üç adet alt sütun (.opposing-column) ve bunların içinde de öğeler (.opposing-item) yer alıyor. Bu kadar basit bir işaretleme ile CSS sihrini yapmaya başlayabiliriz. Öncelikle efekti sadece geniş ekranlarda uygulamak için bir medya sorgusu ekliyoruz. Ardından üst öğeyi flex container yapıp aralıkları ayarlıyoruz. Daha sonra bir 'maskeleme' efekti oluşturmak için :before ve :after sözde öğelerini kullanıyoruz. Bu sözde öğelere, arka plan rengiyle uyumlu gradyanlar ekleyerek sütunlardaki öğelerin kaydırma sırasında kayboluyormuş gibi görünmesini sağlıyoruz.
Sütunların düzenine gelince, her bir sütunu flex öğesi olarak tanımlayıp esnek boyutlandırma yapıyoruz. Ardından sütunları grid container yaparak öğeler arasında boşluk bırakıyoruz. Asıl sihirli kısım ise scroll-driven animations ile geliyor. Her sütuna farklı bir scroll-driven animation tanımlayarak, kullanıcı sayfayı kaydırdıkça dış sütunların yukarı, orta sütunun ise aşağı doğru hareket etmesini sağlıyoruz. Bu sayede zıt yönlerde akan bir görsel efekt elde ediyoruz.
Bu yaklaşımın en güzel yanı, neredeyse hiç JavaScript kullanmadan, tamamen CSS ile bu etkileyici efekti yaratabilmemiz. Sadece scroll-driven animations değil, aynı zamanda flex, grid ve gradient mask gibi modern CSS özelliklerini bir arada kullanarak hem performanslı hem de bakımı kolay bir çözüm ortaya çıkıyor. Siz de bu tekniği kendi projelerinizde deneyebilir, hatta geliştirerek farklı varyasyonlar oluşturabilirsiniz. Unutmayın, yaratıcılığın sınırı yok!
