Bazen tasarımcıların aklına öyle fikirler gelir ki ilk başta saçma gelse de zamanla sizi etkisi altına alabilir. İşte 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. Modern CSS özellikleri, özellikle scroll-driven animasyonlar sayesinde bu etkiyi gerçekleştirmek sandığınızdan çok daha kolay. Üstelik yapması da oldukça eğlenceli!
HTML yapısı oldukça basit: Bir üst kapsayıcı (.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 ile CSS'in gerisini halletmesini sağlayabiliriz. Öncelikle bu efekti sadece büyük ekranlarda uygulamak için bir medya sorgusu kullanıyoruz, çünkü küçük ekranlarda bu etki anlamlı olmayacaktır.
Maskeleme efekti oluşturmak için üst kapsayıcının :before ve :after sözde elemanlarına arka plan rengini uyguluyoruz. Bu sayede sütunlardaki öğeler, kapsayıcının sınırlarına yaklaştıkça kayboluyormuş gibi görünüyor. Dış sütunlar yukarı, orta sütun ise aşağı yönde hareket ediyor ve sınırları geçerken yumuşak bir geçişle kayboluyor. Bunun için opaklıkla uğraşmak yerine, gradient kullanarak arka plan renginden sayfaya geçiş yapıyoruz.
Sütunlar flex yapısında, her biri eşit oranda büyüyüp küçülebiliyor. Scroll-driven animasyonlar sayesinde her sütundaki öğeler farklı hızlarda ve yönlerde hareket ediyor. Bu teknik, CSS'in gücünü gösterirken aynı zamanda kullanıcı deneyimine de katkı sağlıyor. Siz de bu yaklaşımı kendi projelerinizde deneyebilir, farklı varyasyonlar yaratarak sayfalarınıza dinamik bir hava katabilirsiniz.
