Bazen tasarımcıların aklına ilk başta saçma gelen fikirler gelir, ama zamanla bu fikirler size de cazip gelmeye başlar. Benim başıma da bu geldi: kullanıcı sayfayı kaydırdıkça sütunlardaki öğelerin zıt yönlerde hareket ettiği bir yapı kurmam gerekiyordu. Neyse ki modern CSS özellikleri, özellikle de scroll-driven animasyonlar sayesinde bu iş sanıldığı kadar zor değil. Üstelik yapması da oldukça eğlenceli!
HTML yapısı oldukça basit: bir üst öğe (.opposing-columns), onun altında sütunlar (.opposing-column) ve her sütunun içinde öğeler (.opposing-item) yer alıyor. Bu kadar basit bir işaretleme yeterli, gerisini CSS hallediyor. İlk olarak, efekti yalnızca büyük ekranlarda uygulamak için bir medya sorgusu ekliyoruz. Ardından, sütunları flex container yapıp aralarına boşluk koyuyoruz.
Efektin inandırıcı olması için bir maskeleme (masking) tekniği kullanıyoruz. Dış sütunlardaki öğeler yukarı, ortadaki sütun ise aşağı doğru hareket ediyor. Öğeler üst öğenin sınırlarından çıkarken kayboluyormuş gibi görünmeleri için :before ve :after pseudo-elementlerine arka plan gradyanları ekliyoruz. Bu gradyanlar, sayfanın arka plan rengiyle aynı renkten şeffafa geçiş yaparak öğelerin yumuşak bir şekilde kaybolmasını sağlıyor.
Sistem Güvenliği
Scroll-driven animasyonların gücü sayesinde, her sütuna farklı bir scroll-timeline atayarak öğelerin zıt yönlerde hareket etmesini sağlıyoruz. Bu yaklaşım, JavaScript kullanmadan tamamen CSS ile etkileyici bir görsel efekt yaratmamıza olanak tanıyor. Sonuçta ortaya çıkan yapı, hem performanslı hem de erişilebilirlik açısından azaltılmış hareket ayarlarına saygı gösteriyor.
