Tasarımcılar bazen ilk başta saçma gelen fikirlerle ortaya çıkar, ama zamanla bu fikirler size büyüleyici gelmeye başlar. Ben de tam olarak böyle bir durum yaşadım: bir sayfada kaydırma yapıldığında sütunların zıt yönlerde hareket ettiği bir konsept üzerinde çalışmam gerekiyordu. İlk başta kulağa karmaşık gelse de, modern CSS özellikleri sayesinde bu efektin aslında ne kadar basit olduğunu fark ettim. Özellikle scroll-driven animasyonlar bu işi hem kolaylaştırdı hem de eğlenceli hale getirdi. Şimdi size bu yaklaşımı nasıl uyguladığımı göstereceğim; belki siz de farklı bir yöntem denemek istersiniz.
HTML yapısı oldukça basit: ana bir kapsayıcı (opposing-columns), onun altında sütunlar (opposing-column) ve her sütunun içinde öğeler (opposing-item) yer alıyor. Bu üç katmanlı hiyerarşi, CSS'in sihrini göstermesi için yeterli. Önemli olan, efektin yalnızca büyük ekranlarda çalışmasını sağlamak; küçük ekranlarda bu tür bir efekt anlamını yitireceği için medya sorguları ile sınırlandırıyoruz. 50 rem ve üzeri genişliklerde flexbox düzenine geçerek sütunlar arasında boşluk bırakıyor ve maksimum genişliği sınırlıyoruz.
Maskeleme efekti bu tekniğin en kritik kısmı. Öğelerin kaydırma sırasında sanki yok oluyormuş gibi görünmesi için kapsayıcının öncesi ve sonrası pseudo-elementlerini kullanıyoruz. Bu pseudo-elementler, arka plan rengiyle aynı renkte bir gradyan içeriyor. Üstteki pseudo-element yukarıdan aşağıya doğru saydamlaşırken, alttaki aşağıdan yukarıya doğru saydamlaşıyor. Böylece sütunlardaki öğeler kapsayıcının sınırlarına yaklaştıkça arka plana karışıyormuş gibi görünüyor. Bu maskeleme, öğelerin opaklığını değiştirmeden doğal bir geçiş sağlıyor.
Sütunların yerleşimi için flexbox kullanıyoruz. Her sütun flex: 1 1 10rem ile esneyip büzülebiliyor ve maksimum 10 rem genişliğe ulaşıyor. Ardından bu sütunları grid container yaparak gap özelliği ile öğeler arasına boşluk ekliyoruz. Scroll-driven animasyonların asıl büyüsü burada devreye giriyor: Kaydırma ilerledikçe, sütunlardaki öğeler farklı hızlarda ve yönlerde hareket ediyor. Dış sütunlar yukarı, orta sütun aşağı doğru hareket ederek zıt yönlü bir akış oluşturuyor.
Önemli Gelişmeler
Bu efektin uygulanması, CSS'in animation-timeline özelliği ile mümkün. scroll() fonksiyonunu kullanarak animasyonu kaydırma ilerlemesine bağlıyoruz. Her sütun için farklı scroll timeline'lar tanımlayarak zıt yönleri elde ediyoruz. Örneğin, bir sütun scroll-direction: block ile aşağı kaydırma, diğeri ise scroll-direction: block reverse ile yukarı kaydırma yönünde hareket ediyor. Bu sayede kullanıcı sayfayı aşağı kaydırdıkça sütunlar birbirine zıt yönlerde akıyormuş gibi görünüyor.
Performans ve erişilebilirlik açısından dikkat edilmesi gereken noktalar var. prefers-reduced-motion medya sorgusu ile hareket hassasiyeti olan kullanıcılar için animasyonu devre dışı bırakıyoruz. Ayrıca bu efekt yalnızca büyük ekranlarda anlamlı olduğu için mobil cihazlarda varsayılan düzene dönüyoruz. Tarayıcı desteği şu an için Chrome ve Safari ile sınırlı, ancak bu modern CSS özellikleri yakında tüm tarayıcılarda desteklenecektir.
Bu teknik, web tasarımında kullanıcı deneyimini zenginleştirmek için harika bir araç. Scroll-driven animasyonlar, sayfaya dinamik bir his katarken, kullanıcının kaydırma eylemiyle doğrudan etkileşim kurmasını sağlıyor. Siz de bu yöntemi kendi projelerinizde deneyebilir, farklı varyasyonlar yaratarak yaratıcılığınızı konuşturabilirsiniz. Unutmayın, CSS artık sadece statik stillerden ibaret değil; hareketli ve etkileşimli deneyimler yaratmak için güçlü araçlar sunuyor.
Kaynak: css-tricks.com
