Tasarımcılar bazen başta tuhaf gelen fikirler üretir, sonra bu fikirler zamanla büyür. Ben de sayfayı kaydırdıkça zıt yönlerde hareket eden sütunlar oluşturmam gereken bir konseptle karşılaştığımda böyle hissettim. Neyse ki modern CSS özellikleri, özellikle scroll-driven animasyonlar sayesinde bu efekt sanıldığı kadar zor değil. Hatta yapması oldukça eğlenceli! Bu makalede, bu efekti nasıl oluşturduğumu adım adım anlatacağım.
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 üç katmanlı bir düzen kullanıyoruz. Bu yapı, efektin temelini oluşturuyor ve CSS ile tüm sihir gerçekleşiyor. Öncelikle, efekti yalnızca geniş ekranlarda uygulamak için medya sorgusu ekliyoruz. Ardından, üst öğeye `display: flex` ve uygun boşluklar vererek sütunları yan yana diziyoruz.
Efektin inandırıcı olması için bir maskeleme (masking) tekniği kullanıyoruz. Her sütundaki öğeler kaydırma sırasında üst öğenin sınırlarından geçerken kayboluyormuş gibi görünmeli. Bunun için, üst öğeye `:before` ve `:after` pseudo-elementleri ekleyip bunlara arka plan rengiyle uyumlu gradyanlar veriyoruz. Bu gradyanlar, öğelerin üst ve alt kısımlarda saydamlaşarak kaybolmasını sağlıyor. Ayrıca, `--opposing-mask` değişkeni ile sütunlar ile maskeleme arasındaki mesafeyi ayarlıyoruz.
Sütunların düzeni için flex özelliklerini kullanıyoruz. Her sütun `flex: 1 1 10rem` ile esnek bir yapıya sahip oluyor. Sütun içindeki öğeleri ise grid container yaparak `gap` ile aralarına boşluk ekliyoruz. Son olarak, scroll-driven animasyonları tanımlıyoruz: Dış sütunlar yukarı, orta sütun aşağı hareket ediyor. Bu animasyonlar, sayfanın kaydırma miktarına bağlı olarak çalışıyor ve kullanıcı deneyimini zenginleştiriyor. Daha fazla detay ve canlı örnek için CodePen bağlantısını ziyaret edebilirsiniz.
