Tasarımcılar bazen ilk başta tuhaf görünen fikirlerle ortaya çıkar, ancak bu fikirler zamanla size işlemeye başlar. Ben de tam olarak böyle bir konseptle karşılaştım: kullanıcı sayfayı kaydırdıkça zıt yönlerde hareket eden öğe kolonları oluşturmam gerekiyordu. İlk başta kulağa karmaşık gelse de, modern CSS özellikleri sayesinde aslında sanıldığı kadar zor olmadığını fark ettim. Üstelik yapması da oldukça eğlenceli! Bu makalede, bu efekti nasıl oluşturduğumu adım adım göstereceğim.
Öncelikle HTML yapısını oluşturuyoruz. Bir üst öğe (opposing-columns) ve onun altında üç alt öğe (opposing-column) yer alıyor. Her bir kolonun içinde de opposing-item sınıfına sahip öğeler bulunuyor. Bu basit yapı, CSS ile sihrin gerçekleşmesi için yeterli. Daha sonra, bu efekti yalnızca geniş ekranlarda uygulamak için bir medya sorgusu ekliyoruz. Küçük ekranlarda bu efekt anlamlı olmayacaktır çünkü etkinin görülebilmesi için yeterli alan gerekiyor.
Efektin temelinde, kolonlardaki öğelerin kaydırma sırasında kayboluyormuş gibi görünmesini sağlamak için bir maskeleme tekniği kullanıyoruz. Bunun için üst öğeye :before ve :after sözde öğeleri ekliyoruz. Bu sözde öğelere, sayfanın arka plan rengiyle aynı renkte bir gradient uyguluyoruz. Böylece, öğeler üst öğenin sınırlarını geçerken yavaşça kayboluyormuş gibi görünüyor.
Sistem Güvenliği
Kolonların düzenini oluştururken, her bir kolonu esnek bir kutu (flexbox) öğesi olarak tanımlıyoruz. Ardından, kolonların içindeki öğeleri bir grid düzeniyle yerleştiriyoruz. Bu sayede öğeler arasına boşluk ekleyip düzenli bir görünüm elde ediyoruz. Şimdi sıra, scroll-driven animasyonları uygulamaya geldi. CSS'in bu yeni özelliği sayesinde, kaydırma ilerlemesine bağlı olarak öğelere animasyon uygulayabiliyoruz.
Gelecekte Ne Bekleniyor?
Her bir kolon için farklı kaydırma yönleri tanımlıyoruz. Dıştaki kolonlar yukarı, ortadaki kolon ise aşağı doğru hareket ediyor. Bunu yapmak için, her kolona bir scroll-driven animasyon ekliyoruz. Animasyon zaman çizelgesini, kaydırma konteynerine göre ayarlıyoruz. Bu sayede, kullanıcı sayfayı kaydırdıkça kolonlar belirlenen yönlerde hareket ediyor.
Önemli Gelişmeler
Son olarak, hareket hassasiyeti olan kullanıcılar için azaltılmış hareket ayarlarını da hesaba katıyoruz. prefers-reduced-motion medya sorgusu ile bu kullanıcılar için animasyonları devre dışı bırakıyoruz. Bu sayede, herkes için erişilebilir bir deneyim sunuyoruz. Chrome ve Safari'de desteklenen bu özellik, modern web tasarımında yeni ufuklar açıyor.
Bu teknik, özellikle portföy siteleri, ürün galerileri veya etkileşimli hikaye anlatımı gerektiren projeler için idealdir. Scroll-driven animasyonlar sayesinde, kullanıcı etkileşimini artıran ve görsel olarak çarpıcı deneyimler yaratabilirsiniz. Ayrıca, bu yöntem performans açısından da verimlidir çünkü animasyonlar CSS tarafından yönetilir ve JavaScript'e ihtiyaç duymaz.
Detaylar ve Etkileri
Sonuç olarak, modern CSS araçlarıyla daha önce karmaşık görünen efektleri kolayca oluşturmak mümkün. Scroll-driven animasyonlar, web tasarımcılarına yaratıcı özgürlük sunarken, kullanıcı deneyimini de zenginleştiriyor. Siz de bu tekniği kendi projelerinizde deneyerek, farklı kaydırma yönlerinde hareket eden kolonlar oluşturabilirsiniz. Unutmayın, CSS'in gücü sınır tanımıyor!
Kaynak: css-tricks.com
