Tasarımcılar bazen ilk başta garip gelen fikirlere sahip olurlar, ancak bu fikirler zamanla sizi etkisi altına alabilir. Ben de sayfayı kaydırdıkça zıt yönlerde hareket eden sütunlar oluşturmam gereken bir konseptle karşılaştığımda aynı şeyi yaşadım. Modern CSS özellikleri, özellikle scroll-driven animasyonlar sayesinde bu efektin göründüğü kadar zor olmadığını keşfettim. Üstelik yapması da oldukça eğlenceli! Bu yazıda, bu efekti nasıl oluşturduğumu adım adım anlatacağım ve belki siz de farklı bir yaklaşım denemek istersiniz.
HTML yapısı oldukça basit: Bir üst öğe (`.opposing-columns`), onun alt öğeleri (`.opposing-column`) ve bu alt öğelerin içindeki öğeler (`.opposing-item`). Tüm sihir CSS ile gerçekleşiyor. İlk olarak, efekti yalnızca büyük ekranlarda uygulamak için bir medya sorgusu ekliyoruz. Ardından, üst öğeyi flex container yapıp sütunları yan yana diziyoruz. Maksimum genişlik ve kenar boşlukları ile düzeni ortalanmış bir şekilde konumlandırıyoruz.
Efektin en önemli kısmı, sütunlardaki öğelerin kaydırma sırasında kayboluyormuş gibi görünmesini sağlamak. Bunun için bir maskeleme tekniği kullanıyoruz. Belgeye bir arka plan rengi değişkeni tanımlıyoruz ve bu rengi üst öğenin `:before` ve `:after` pseudo-elementlerine uyguluyoruz. Bu pseudo-elementler, üst öğenin üstünde ve altında konumlandırılıyor ve arka plan gradyanları sayesinde öğelerin kaybolma efekti yaratılıyor. Örneğin, üstteki pseudo-elemente yukarıdan aşağıya doğru saydamlaşan bir gradyan ekliyoruz, böylece yukarı doğru kaydırılan öğeler yavaşça kayboluyor.
Sütunları düzenlerken her bir sütunu flex öğesi yapıp `flex: 1 1 10rem` ile esnek boyutlandırıyoruz. Ardından sütunları grid container yaparak öğeler arasında boşluk bırakıyoruz. Scroll-driven animasyonlar için her sütuna farklı bir animasyon adı ve zaman çizelgesi atıyoruz. Dış sütunlar yukarı, orta sütun ise aşağı doğru hareket ediyor. Bu animasyonlar, kullanıcı sayfayı kaydırdıkça tetikleniyor ve öğeler zıt yönlerde akıyormuş gibi bir his yaratıyor. Sonuç olarak, göz alıcı ve modern bir kaydırma deneyimi elde ediyoruz.
