Tasarımcılar bazen ilk başta saçma görünen fikirler üretir, ama zamanla bu fikirler size sevimli gelmeye başlar. İşte tam olarak böyle bir konsept: sayfayı kaydırdıkça birbirine zıt yönlerde hareket eden sütunlar. İlk bakışta karmaşık gibi görünse de, modern CSS özellikleri, özellikle scroll-driven animations sayesinde bu efekt sandığınızdan çok daha kolay. Üstelik yapması da oldukça eğlenceli! Bu yazıda, bu efekti nasıl oluşturduğumu adım adım anlatacağım. Siz de kendi yönteminizi geliştirip benimle paylaşabilirsiniz.
HTML yapısı oldukça basit: Bir üst öğe (.opposing-columns), onun altında sütunlar (.opposing-column) ve her sütunun içinde öğeler (.opposing-item) yer alıyor. Bu üç katmanlı yapı, efektin temelini oluşturuyor. CSS ise geri kalan her şeyi hallediyor. Önemli olan, bu efekti yalnızca büyük ekranlarda uygulamak; küçük ekranlarda bu efekt anlamlı olmayacağı için medya sorgusu ile sınırlandırıyoruz.
Efektin sırrı, bir maskeleme tekniğinde yatıyor. Üst öğenin :before ve :after sözde öğelerini kullanarak, sütunların üst ve alt kısımlarında kaybolma efekti yaratıyoruz. Bunun için önce bir arka plan rengi değişkeni (--opposing-bg) tanımlıyoruz. Ardından sözde öğelere arka plan gradyanları ekleyerek, öğelerin üst öğenin sınırlarından geçerken yavaşça kaybolmasını sağlıyoruz. Bu sayede opaklıkla uğraşmadan doğal bir geçiş elde ediyoruz.
Nasıl Önlem Alınmalı?
Sütunların düzeni için flexbox kullanıyoruz. Her sütuna flex: 1 1 10rem vererek esnek bir yapı oluşturuyoruz. Ardından sütunları grid container yaparak öğeler arasına boşluk ekliyoruz. Bu noktada dikkat edilmesi gereken, sütunların taşma durumunu engellemek için overflow: hidden kullanmak. Ayrıca, kaydırma animasyonlarının çalışması için sütunlara bir yükseklik vermek gerekiyor; aksi halde animasyon tetiklenmez.
Scroll-driven animations için animation-timeline özelliğini kullanıyoruz. scroll() fonksiyonu ile kaydırma konteynerini belirliyoruz. Dış sütunlardaki öğeler yukarı, orta sütundaki öğeler ise aşağı hareket edecek şekilde animasyon tanımlıyoruz. Bu zıt yönler, kullanıcı sayfayı kaydırdıkça görsel bir ilgi yaratıyor. Ayrıca, hareket hassasiyeti olan kullanıcılar için prefers-reduced-motion medya sorgusu ile animasyonu devre dışı bırakıyoruz.
Efektin tam anlamıyla çalışması için sütunlara animation-range ekleyerek animasyonun başlangıç ve bitiş noktalarını ayarlıyoruz. Bu sayede öğeler yalnızca görünür alanda hareket ediyor. Ayrıca, her sütun için farklı gecikme süreleri (animation-delay) kullanarak daha doğal bir akış elde ediyoruz. Tüm bu ayarlamalar, kullanıcı deneyimini artırmak ve göz yormayan bir efekt sunmak için yapılıyor.
Sonuç olarak, CSS scroll-driven animations ile zıt yönlerde hareket eden sütunlar oluşturmak, modern web tasarımında etkileyici bir araç. Bu teknik, kullanıcı etkileşimini artırırken sayfaya dinamik bir hava katıyor. Denemekten çekinmeyin; kendi projelerinizde bu efekti nasıl uygulayacağınızı görmek için yukarıdaki adımları takip edin. Unutmayın, en iyi öğrenme yolu denemekten geçer!
Sistem Güvenliği
Umarım bu rehber, scroll-driven animations dünyasına giriş yapmanıza yardımcı olmuştur. Eğer farklı bir yaklaşımınız varsa veya bu efekti geliştirmek için önerileriniz varsa, lütfen paylaşın. Birlikte daha iyi çözümler üretebiliriz. Bir sonraki yazıda görüşmek üzere!
Kaynak: css-tricks.com
