Web tasarımcıları bazen ilk başta tuhaf gelen ancak zamanla sevilmeye başlayan fikirler üretir. Ben de sayfa kaydırıldığında zıt yönlerde hareket eden sütunlar içeren bir konseptle karşılaştığımda aynı şeyi hissettim. Neyse ki modern CSS özellikleri, özellikle scroll-driven animasyonlar sayesinde bu efekt göründüğü kadar zor değil. Üstelik yapması da oldukça eğlenceli! Bu yazıda, bu efekti nasıl oluşturabileceğinizi adım adım anlatacağım.
HTML yapısı oldukça basit: Bir üst öğe (.opposing-columns) ve onun altında üç alt sütun (.opposing-column) bulunuyor. Her sütunun içinde de .opposing-item sınıfına sahip öğeler yer alıyor. CSS ise sihrin gerçekleştiği yer. İlk olarak, efekti yalnızca geniş ekranlarda uygulamak için bir medya sorgusu kullanıyoruz. Ardından, sütunların kaydırma sırasında kayboluyormuş gibi görünmesi için bir maskeleme efekti oluşturuyoruz.
Maskeleme efekti için, üst öğenin :before ve :after sözde öğelerine arka plan rengiyle uyumlu gradyanlar uyguluyoruz. Bu gradyanlar, sütun öğeleri üst öğenin sınırlarından çıkarken yavaşça kayboluyormuş gibi görünmelerini sağlıyor. Dış sütunlar yukarı, orta sütun ise aşağı doğru hareket ediyor. Sütunlar flex ve grid yapılarıyla düzenleniyor, böylece öğeler arasında boşluklar oluşturuluyor.
Scroll-driven animasyonlar, sayfa kaydırma ilerlemesine bağlı olarak öğeleri dönüştürmemize olanak tanıyor. Her sütun için farklı scroll-driven animation-name ve animation-timeline tanımlayarak zıt yönlerde hareket sağlıyoruz. Örneğin, dış sütunlar yukarı kayarken orta sütun aşağı kayıyor. Bu teknik, daha önce JavaScript gerektiren karmaşık efektleri artık sadece CSS ile yapmamıza imkan tanıyor. Denemekten çekinmeyin ve kendi versiyonunuzu oluşturun!
