Tasarımcılar bazen ilk başta saçma görünen fikirler bulurlar, ancak zamanla bu fikirler size hitap etmeye başlar. Ben de sayfa kaydırıldığında zıt yönlerde hareket eden sütunlar oluşturmam gereken bir konseptle karşılaştığımda aynı şeyi yaşadım. Bu konsept, kullanıcının kaydırma hareketine bağlı olarak sütunların birbirine zıt yönlerde hareket etmesini sağlıyor. İlk bakışta karmaşık görünse de, modern CSS özellikleri sayesinde aslında oldukça basit. Özellikle scroll-driven animasyonlar bu işi çok kolaylaştırıyor. Üstelik yapması da oldukça eğlenceli! Gelin size nasıl yaklaştığımı göstereyim; belki siz de farklı bir yöntemle nasıl yapacağınızı paylaşmak 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) şeklinde. Bu yapı, efektin temelini oluşturuyor. CSS ise geri kalan her şeyi hallediyor. Öncelikle bu efekti yalnızca büyük ekranlarda uygulayacağız, çünkü küçük ekranlarda efektin anlamlı olması için yeterli alan bulunmuyor. @media sorgusu ile 50rem ve üzeri genişliklerde flexbox düzenini etkinleştiriyoruz.
Efektin inandırıcı olması için bir maskeleme efekti oluşturuyoruz. Dış sütunlar yukarı, orta sütun ise aşağı doğru hareket ediyor. Öğeler üst öğenin sınırlarını geçerken yavaşça kayboluyormuş gibi görünmeleri gerekiyor. Bunun için üst öğeye bir arka plan rengi atıyoruz ve aynı rengi üst öğenin :before ve :after pseudo-elementlerine uyguluyoruz. Bu pseudo-elementler, öğelerin üst ve alt kısımlarında bir maske görevi görüyor. Gradient kullanarak üst kısımda arka plan renginden saydama, alt kısımda ise saydamdan arka plan rengine geçiş sağlıyoruz. Böylece öğeler bu maskelerin altından geçerken kayboluyormuş gibi görünüyor.
Gelecekte Ne Bekleniyor?
Sütunların düzenini flexbox ile ayarlıyoruz. Her sütuna flex: 1 1 10rem değeri vererek büyüme, küçülme ve temel boyutlarını belirliyoruz. Ardından sütunları grid container yaparak gap özelliği ile öğeler arasına boşluk ekliyoruz. Bu sayede öğeler düzgün bir şekilde sıralanıyor ve efekt daha belirgin hale geliyor. Scroll-driven animasyonları kullanarak her sütunun kaydırma yönüne göre hareket etmesini sağlıyoruz. Örneğin, dış sütunlar yukarı, orta sütun aşağı doğru hareket ediyor. Bu animasyonlar tamamen CSS ile kontrol ediliyor ve JavaScript gerektirmiyor.
Sistem Güvenliği
Bu tekniğin en güzel yanı, kullanıcının azaltılmış hareket tercihlerine saygı duyması. prefers-reduced-motion medya sorgusu ile hareket hassasiyeti olan kullanıcılar için animasyonları devre dışı bırakabiliyoruz. Ayrıca Chrome ve Safari'de destekleniyor, ancak diğer tarayıcılarda da çalışması için polyfill veya alternatif çözümler düşünülebilir. Bu efekt, özellikle portfolyo siteleri, ürün tanıtım sayfaları veya yaratıcı bloglar için ideal. Kullanıcıya dinamik bir deneyim sunarken, sayfanın performansını da olumsuz etkilemiyor.
Detaylar ve Etkileri
Sonuç olarak, scroll-driven animasyonlar ile zıt yönlü sütunlar oluşturmak, modern CSS'in gücünü gösteren harika bir örnek. Karmaşık görünen bir efekti birkaç satır kodla hayata geçirebiliyoruz. Eğer siz de bu efekti denemek isterseniz, yukarıdaki adımları takip ederek kendi projelerinize uyarlayabilirsiniz. Farklı renkler, boyutlar veya animasyon hızları ile kişiselleştirebilirsiniz. Unutmayın, en iyi efektler bazen en basit fikirlerden doğar.
Kaynak: css-tricks.com
