CSS Scroll-Snap ile Snapping Scroll Bölümleri Nasıl Yapılır (fullpage.js alternatifi)

Yayınlanan: 2022-07-19

Bu öğreticide, kullanıcı kaydırdıkça bir tam ekran bölümünden diğerine geçiş yapan bir sayfa yapacağız. Bu efekt fullpage.js kütüphanesi tarafından popüler hale getirildi. Ancak şimdi, tam sayfadaki lisans değişiklikleri (artık bunun için ödeme yapmanız gerekiyor), yeni CSS kaydırma-snap modülü ve kesişim gözlemci API'sinin eksiksiz tarayıcı desteği nedeniyle daha iyi seçenekler var.

Yani, bir fullpage.js alternatifi arıyorsanız, bütün bir kütüphaneye bile ihtiyacınız olmayabilir, sadece kendiniz kodlayabilirsiniz!

Aslında, yakalama efekti %100 CSS'dir. JS, ekran "görüntüye geçtiğinde" öğeleri soldurmak için kullanılır.

İlham almak için CodePen'de bulunan Michelle Barker'ın bu "Dinozor Parkı kaydırmalı hızlı demosunu" kullanacağız:

https://codepen.io/michellebarker/pen/PowYKXJ CodePen'de Michelle Barker (@michellebarker) tarafından kaleme alınan Dinozor Parkı kaydırma ek demosuna bakın.

Dikkat, "kaydırarak yakalama" efektini tam olarak deneyimlemek için muhtemelen bunu daha büyük bir ekranda görüntülemek isteyeceksiniz.

Kesişme Gözlemcisi ile birleştirilmiş CSS kullanarak, sayfanın her tam ekran bölümünü hızlı kaydırma yapacağız ve görüntü alanına girdiğinde içeriği solduracağız.

Daha da iyisi, sadece ~ 30 satırlık JS kodu! Animasyonlar CSS ile yapılır; tek yapmamız gereken, bölümlerin ve içeriğin JS ile görüş alanımıza ne zaman girdiğini anlamak.

1) Sayfanızı Oluşturun

İlk olarak, bir sayfa oluşturmanız veya mevcut bir sayfayı bu basit efektle uyumlu olacak şekilde yapılandırmanız gerekir. Burada dikkat edilmesi gereken iki şey var:

Bölümlerimizi içeren bir <main> öğesi kullanıyoruz. Bu ana öğe, içindeki <section> öğelerinin her biri gibi 100vh'dir.

HTML:

<main> <section class="sectionsection-1"> <div class="section__content" data-content >İçindeki içerik</div> </section> <section class="sectionsection-2"> <div class= "section__content" data-content >İçerik içeriği</div> </section> <section class="sectionsection-3"> <header class="section__header"> <h3 class="section__title">Keşfet ve Keşfet</h3 > </header> <div class="section__content" data-content >İçindeki içerik</div> </section> </main>

CSS:

/* Kaydırma davranışı */ @media (min-yükseklik: 30em) { main { scroll-snap-type: y zorunlu; yükseklik: 100vh; taşma-y: kaydırma; } } .section { renk: beyaz; pozisyon: göreceli; kaydırma-snap-hizalama: merkez; ekran: esnek; esnek yön: sütun; min-yükseklik: 100vh; } @media (min-yükseklik: 30em) { .bölüm {yükseklik: 100vh; } }

2) Yapışmayı CSS ile Yapılandırın

Burada her biri 100vh yüksekliğinde birden fazla bölüm olduğunu görebiliriz.

<main> öğesi de overflow-y:scroll ile 100vh'dir.

Kullanıcı için kaydırma davranışı, varsayılan web sayfasıyla aynıdır.

Yukarıda bahsedilen CSS'yi eklediyseniz, yakalama efekti zaten oyunda olacaktır. Nasıl çalıştığına bir göz atalım.

İlk olarak, " @media (min-height: 30em) " sorgusu, yüksekliği kısa olan mobil ekran boyutları için yakalama efektini devre dışı bırakır. Ana bölümün altında, yakalamayı sağlayan bir özellik vardır:

main { .... kaydırmalı-snap tipi: y zorunlu; .... }

Bu harika bir küçük özellik "bir tane olması durumunda kaydırma kapsayıcısında ne kadar kesin noktaların uygulanacağını ayarlar" (MDN).

Ve sonra bölümlerimizin altında:

.section { .... kaydırma-snap-hizalama: merkez; .... }

Bu özellik "özellik, kutunun yakalama konumunu, yakalama kabının bağlantı noktası (hizalama kabı olarak) içindeki yakalama alanının (hizalama konusu olarak) hizalaması olarak belirtir" (MDN).

CSS kaydırmalı ek modül hakkında daha fazla bilgiyi buradan edinebilirsiniz:

Ve bu kadar basit. <main> kapsayıcısındaki (tüm bölümler) doğrudan çocuklar, <main> kapsayıcısının ortasına kaydırılarak yapışacaktır. Hem Ana hem de Bölüm 100vh olduğundan, kaydırma bölümden bölüme geçecektir.

3) Kavşak Gözlemcisini Kullanırken İçeriği Soldur

Artık tam sayfa kaydırma efektimiz var ve başka bir şey yapmak istemiyorsanız bu bölümü atlayabilir ve web sitenizin keyfini çıkarabilirsiniz. Ancak, her tam sayfa bölümü görüntülendiğinde, içerideki içeriği soldurmak istiyorum - benzersiz ve harika bir efekt (ayrıca fullpage.js ile mümkün olan).

Bunu yapmak için, <main> görünüm alanımızdaki bölümlerin konumlarını anlamak için kesişim gözlemcisini kullanacağız.

const bölümler = [...document.querySelectorAll("bölüm"]); let seçenekler = { rootMargin: "0px", eşik: 0.75, }; const geri arama = (girişler, gözlemci) => { input.forEach((giriş) => { const { target } = giriş; if (entry.intersectionRatio >= 0.75) { target.classList.add("is-visible") ; } else { target.classList.remove("görünür"); } }); }; const gözlemci = new IntersectionObserver(geri arama, seçenekler); bölümler.forEach((bölüm, dizin) => { const bölümChildren = [...section.querySelector("[veri-içeriği]").children];sectionChildren.forEach((el, dizin) => { el.style .setProperty("--delay", `${index * 250}ms'); }); gözlemci.gözlem(bölüm); });

Burada yapılan iki şey var. İlk olarak, bir bölümün görünüm alanında olduğunu tanımlar ve girerken bir CSS sınıfı .is-visible ekler. Görünüm penceresinden çıkarken o sınıfı kaldırır.

Ek olarak, bu bölüm görüntü alanına girerken, arka arkaya (birbiri ardına) alt öğelerin her biri için 250ms gecikme özelliğini ayarlar. Bu, kademeli bir solmaya neden olur.

Bunu yalnızca veri içeriği özniteliğine sahip öğeler içindeki çocuklara yapar. Bu nedenle, solmanın etkili olmasını istiyorsanız, bunu sayfa içeriğinizin etrafındaki sarmalayıcılara eklemeniz gerekir.

Şimdi, bu işi yapmak için, .is-visible sınıfının eklendiği öğeler için fade-in animasyonunu ayarlamamız gerekiyor.

@media (min-yükseklik: 30em) { .section__content > * { opaklık: 0; transform: translate3d(0, 4rem, 0); geçiş: opaklık 800ms var(--gecikme), 800ms kübik-bezier(0.13, 0.07, 0.26, 0.99) dönüşümü var(--gecikme); } } .is-visible .section__content > * { opaklık: 1; transform: translate3d(0, 1rem, 0); } .is-visible .section__img { opaklık: 0.75; }

Başlangıç demosundan HTML'ye geri dönersek, içeriğin etrafında .section__content sınıfı ve data-content özniteliği ile sarmalanan bir div olduğunu göreceksiniz.

Bu, JS ve CSS'mizi birbirine bağlar. Opaklık, görünüm alanına girdiğinde kesişim gözlemcisi tarafından .is-visible sınıfı eklenene kadar içerik için 0'dır. Ayrıldığında, 0'lık bir opaklığa geri döner, bu nedenle kaydırma yönünüz ne olursa olsun, her zaman etkin bir besleme olacaktır.

Son olarak, her bir alt öğeye ardışık olarak uygulanan delay , yavaşlama efektini kademelendirir.

Üçüncü bölüme dikkat edin. Bölüm başlığı bir veri içeriği bölümünde değildir, bu nedenle kaybolmaz (zaten orada olacaktır).

Tüm Kod

İşte demo:

Demomuzda kullandığımız tüm kodlar:

HTML

<main> <section class="sectionsection-1"> <div class="section__content" data-content> <img class="section__imgsection__img--left" src="https://s3-us-west-2 .amazonaws.com/s.cdpn.io/85648/trex.svg" alt="T-rex" /> <h2>İçerik içeriği</h2> <p>blah falan</p> </div> < /section> <section class="section partition-2"> <div class="section__content" data-content> <h2>İçerik içeriği</h2> <p>blah falan filan</p> </div> </div> bölüm> <section class="section partition-3"> <header class="section__header"> <h3 class="section__title">Keşfet ve Keşfet</h3> </header> <div class="section__content" veri içeriği > <h2>İçerik içeriği</h2> <p>blah blah blah</p> </div> </section> </main>

CSS

@media (min-yükseklik: 30em) { ana { kaydırmalı-snap-türü: y zorunlu; yükseklik: 100vh; taşma-y: kaydırma; } } .section { renk: beyaz; pozisyon: göreceli; kaydırma-snap-hizalama: merkez; ekran: esnek; esnek yön: sütun; min-yükseklik: 100vh; } @media (min-yükseklik: 30em) { .bölüm {yükseklik: 100vh; } } @media (min-yükseklik: 30em) { .section__content > * { opaklık: 0; transform: translate3d(0, 4rem, 0); geçiş: opaklık 800ms var(--gecikme), 800ms kübik-bezier(0.13, 0.07, 0.26, 0.99) dönüşümü var(--gecikme); } } .is-visible .section__content > * { opaklık: 1; transform: translate3d(0, 1rem, 0); } .is-visible .section__img { opaklık: 0.75; }

JS

Çözüm

Bu, yalnızca tam ekran bölümleri arasında geçiş yapmakla kalmayan mükemmel bir fullpage.js alternatifidir. Ayrıca, bir bölümün sayfaya ne zaman girdiğini anlamak ve ardından dinamik olarak kademeli bir animasyon uygulamak için kesişim gözlemcisi API'sini kullandık. Minimal Vanilla JS ve CSS ile gerçekten harika efektler oluşturmak ve yapmak için bu temel örneği kullanabilirsiniz.