Tasarımcılar bazen ilk bakışta saçma görünen fikirlerle ortaya çıkar, ama zamanla bu fikirler size iyice yerleşir. İşte ben de böyle bir konseptle karşılaştım: Kullanıcı sayfayı kaydırdıkça, içindeki öğeler zıt yönlerde hareket eden kolonlar oluşturmak. İlk başta 'bu nasıl olacak?' dedim ama modern CSS özellikleri sayesinde, özellikle scroll-driven animations ile, sanılandan çok daha kolay olduğunu gördüm. Üstelik yapması da oldukça keyifli! Bu yazıda, bu efekti nasıl oluşturduğumu adım adım anlatacağım; belki siz de farklı bir yaklaşım denemek istersiniz.
Öncelikle HTML yapısına bakalım. Üç ana sütundan oluşan bir düzenimiz var. Her sütun kendi içinde birden fazla öğe barındırıyor. İşte temel HTML kodu:Bu kadar basit bir yapıyla, gerisini CSS hallediyor...................
Efektin sadece geniş ekranlarda çalışmasını istiyoruz, çünkü dar ekranlarda bu tür bir animasyon anlamlı olmuyor. Bunun için bir medya sorgusu kullanıyoruz. Ayrıca, kullanıcıların hareket hassasiyetine saygı duymak için 'prefers-reduced-motion' medya sorgusunu da ekliyoruz. Böylece, hareketi azaltma tercihi olan kullanıcılar için animasyon devre dışı kalıyor. @media screen and (width >= 50rem) { .opposing-columns { display: flex; gap: 2rem; max-inline-size: min(90dvi, 50rem); margin-inline: auto; } }
Sihirli kısım, sütunların üst ve alt kısımlarında bir maskeleme efekti oluşturmak. Bunun için :before ve :after pseudo-elementlerini kullanıyoruz. Bu elementlere, arka plan rengiyle uyumlu bir gradient uygulayarak, öğelerin kayboluyormuş gibi görünmesini sağlıyoruz. Örneğin, üstteki maske için gradient yukarıdan aşağıya doğru giderken, alttaki maske için ters yönde. Bu sayede, öğeler sütunun dışına çıktıkça yavaşça kayboluyor. :root { --opposing-bg: lightcyan; --opposing-mask: 3rem; } .opposing-columns { position: relative; margin-block: var(--opposing-mask); } .opposing-columns::before, .opposing-columns::after { content: ""; position: absolute; inset-inline: 0; block-size: calc(var(--opposing-mask) * 3); pointer-events: none; z-index: 1; } .opposing-columns::before { background: linear-gradient(to bottom, var(--opposing-bg) var(--opposing-mask), transparent); inset-block-start: calc(var(--opposing-mask) * -1); } .opposing-columns::after { background: linear-gradient(to top, var(--opposing-bg) var(--opposing-mask), transparent); inset-block-end: calc(var(--opposing-mask) * -1); }
Gelecekte Ne Bekleniyor?
Şimdi sıra kolonların düzenine geldi. Her bir sütun, flex container içinde flex öğesi olarak yer alıyor. flex: 1 1 10rem değeriyle, sütunların esnemesine ve belirli bir genişlikte kalmasına izin veriyoruz. Ayrıca, sütunları grid container yaparak iç öğeler arasında boşluk bırakıyoruz. .opposing-column { flex: 1 1 10rem; display: grid; gap: 1rem; }
Asıl eğlenceli kısım, scroll-driven animations ile sütunların zıt yönlerde hareket etmesini sağlamak. Bunun için @scroll-timeline kullanıyoruz. Her sütuna bir scroll-timeline atıyoruz ve animation-name ile bu timeline'ı bağlıyoruz. Dış sütunlar yukarı, orta sütun aşağı hareket edecek şekilde ayarlıyoruz. @scroll-timeline scroll-up { source: auto; orientation: vertical; scroll-offsets: 0%, 100%; } @scroll-timeline scroll-down { source: auto; orientation: vertical; scroll-offsets: 0%, 100%; } .opposing-column:nth-child(1), .opposing-column:nth-child(3) { animation: move-up linear; animation-timeline: scroll-up; } .opposing-column:nth-child(2) { animation: move-down linear; animation-timeline: scroll-down; } @keyframes move-up { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes move-down { from { transform: translateY(0); } to { transform: translateY(100%); } } Burada dikkat edilmesi gereken nokta, scroll-timeline'ın henüz tüm tarayıcılarda tam desteklenmemesi. Chrome ve Safari'de çalışıyor, Firefox'ta ise henüz deneysel aşamada.
Son olarak, kullanıcı deneyimini iyileştirmek için bazı eklemeler yapabiliriz. Örneğin, sayfa yüklendiğinde animasyonun hemen başlamaması için animation-delay kullanabiliriz. Ayrıca, animasyon hızını ayarlamak için animation-duration değerini değiştirebiliriz. Ancak en önemlisi, 'prefers-reduced-motion' medya sorgusunu kullanarak, hareket hassasiyeti olan kullanıcılar için animasyonu devre dışı bırakmaktır. Bu, erişilebilirlik açısından kritik bir adımdır. @media (prefers-reduced-motion: reduce) { .opposing-column { animation: none !important; } }
Nasıl Önlem Alınmalı?
Gördüğünüz gibi, CSS scroll-driven animations ile zıt yönlerde hareket eden kolonlar oluşturmak aslında çok da zor değil. Bu teknik, web sitenize dinamik ve ilgi çekici bir dokunuş katabilir. Özellikle ürün listeleri, portföy galerileri veya blog yazıları gibi içeriklerde kullanılabilir. Denemekten çekinmeyin ve kendi versiyonunuzu oluşturun. Unutmayın, en iyi öğrenme yöntemi uygulamaktır!
Kaynak: css-tricks.com
