[ad_1]
Dalam tutorial ini, kita akan membuat halaman yang di-snap dari satu bagian layar penuh ke bagian lain saat pengguna menggulir. Efek ini dipopulerkan oleh fullpage.js
Perpustakaan. Tapi sekarang, ada opsi yang lebih baik karena perubahan lisensi ke halaman penuh (Anda sekarang harus membayarnya), agak baru Scroll-snap CSS modul, dan dukungan browser lengkap dari API pengamat persimpangan.
Jadi, jika Anda mencari halaman penuh.js alternatif, Anda bahkan mungkin tidak memerlukan seluruh perpustakaan, Anda bisa mengkodekannya sendiri!
Faktanya, efek gertakan adalah 100% CSS. JS hanya digunakan untuk memudarkan elemen ketika layar “terkunci” dalam tampilan.
Kami akan menggunakan “demo jepret gulir Taman Dinosaurus” ini oleh Michelle Barker yang tersedia di pena kode untuk inspirasi:
https://codepen.io/michellebarker/pen/PowYKXJ
Lihat Pena
Demo snap gulir Taman Dinosaurus oleh Michelle Barker (@michellebarker) pada pena kode.
Dengan menggunakan CSS yang digabungkan dengan Intersection Observer, kami akan membuat setiap bagian layar penuh dari snap-scroll halaman, dan memudarkan konten saat memasuki viewport.
Lebih baik lagi, hanya ~30 baris kode JS! Animasi dilakukan dengan CSS; yang perlu kita lakukan adalah memahami ketika bagian dan konten memasuki area pandang kita dengan JS.
Daftar isi
Toggle1) Bangun Halaman Anda
Pertama, perlu membuat halaman, atau mengonfigurasi halaman yang sudah ada agar kompatibel dengan efek sederhana ini. Ada dua hal yang perlu diperhatikan di sini:
Kami menggunakan <main>
elemen, yang berisi bagian kami. Elemen utama ini adalah 100vh, seperti halnya masing-masing <section>
elemen di dalam.
HTML:
Jelajahi & Temukan</h3 >
CSS:
/* Perilaku scroll */ @media (tinggi minimum: 30em) { main { scroll-snap-type: y wajib; tinggi: 100vh; overflow-y: gulir; } } .section { warna: putih; posisi: relatif; scroll-snap-align: tengah; tampilan: fleksibel; arah fleksibel: kolom; min-tinggi: 100vh; } @media (tinggi minimum: 30em) { .section { tinggi: 100vh; } }
2) Konfigurasikan Snapping dengan CSS

Di sini kita dapat melihat bahwa ada beberapa bagian, masing-masing dengan ketinggian 100vh.
Elemen
Jika Anda menambahkan CSS yang disebutkan di atas, efek gertakan sudah akan dimainkan. Mari kita lihat cara kerjanya.
Pertama, “@media (min-height: 30em)
” query menonaktifkan efek gertakan untuk ukuran layar ponsel yang terlalu pendek dalam hal tinggi. Di bawah bagian utama, ada satu properti yang memungkinkan gertakan:
main { ….scroll-snap-type: y wajib; …. }
Ini adalah properti kecil yang keren “menetapkan seberapa ketat titik jepret diberlakukan pada wadah gulir jika ada” (MDN).
Dan kemudian di bawah bagian kami, kami memiliki:
.section { ….scroll-snap-align: center; …. }
Properti ini “properti menentukan posisi jepret kotak sebagai penyelarasan area jepretnya (sebagai subjek perataan) di dalam snapport wadah jepretnya (sebagai wadah penjajaran)” (MDN).
Pelajari lebih lanjut tentang modul scroll-snap CSS di sini:
Dan sesederhana itu. Anak-anak langsung di dalam wadah
3) Memudar Konten Dalam Menggunakan Pengamat Persimpangan
Sekarang, kami memiliki efek gulir halaman penuh, dan jika Anda tidak ingin melakukan hal lain, Anda dapat melewati bagian ini dan menikmati situs web Anda. Namun, ketika setiap bagian halaman penuh masuk ke tampilan, saya ingin memudarkan konten di dalamnya – efek unik dan keren (juga yang mungkin dilakukan dengan fullpage.js).
Untuk melakukan ini, kami akan menggunakan pengamat persimpangan untuk memahami posisi bagian dalam area pandang
bagian const = […document.querySelectorAll(“section”)]; let options = { rootMargin: “0px”, ambang batas: 0,75, }; const callback = (entri, pengamat) => { entries.forEach((entry) => { const { target } = entri; if (entry.intersectionRatio >= 0.75) { target.classList.add(“is-visible”) ; } else { target.classList.remove(“terlihat”); } }); }; const observer = new IntersectionObserver(callback, options); section.forEach((bagian, indeks) => { const sectionChildren = […section.querySelector(“[data-content]”).anak]; sectionChildren.forEach((el, index) => { el.style.setProperty(“–delay”, `${index * 250}ms`); }); observer.observe(bagian) ; });
Ada dua hal yang dilakukan di sini. Pertama, ini mengidentifikasi saat bagian berada di viewport, dan saat masuk, menambahkan kelas CSS .is-visible
. Saat meninggalkan viewport, itu menghapus kelas itu.
Selain itu, saat bagian ini memasuki viewport secara berurutan (satu demi satu) menetapkan properti penundaan selama 250 md pada setiap elemen turunan. Ini membuat efek fade yang terhuyung-huyung.
Ini hanya berlaku untuk anak-anak dalam elemen yang memiliki atribut konten-data. Jadi, Anda perlu menambahkannya ke pembungkus di sekitar konten halaman Anda jika Anda ingin efek fade.
Sekarang, untuk membuatnya berfungsi, kita perlu menyiapkan animasi fade-in untuk elemen yang memiliki kelas .is-visible yang ditambahkan.
@media (tinggi minimum: 30em) { .section__content > * { opacity: 0; mengubah: translate3d(0, 4rem, 0); transisi: opacity 800ms var(–delay), mengubah 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(–delay); } } .is-terlihat .section__content > * { opacity: 1; mengubah: translate3d(0, 1rem, 0); } .is-terlihat .section__img { opacity: 0.75; }
Jika kita merujuk kembali ke HTML dari demo awal, Anda akan melihat bahwa ada div yang membungkus konten dengan kelas .section__content, dan atribut data-content.
Jelajahi & Temukan</h3 >
Ini mengikat JS dan CSS kami bersama-sama. Opacity adalah 0 untuk konten sampai .is-visible
kelas ditambahkan oleh pengamat persimpangan ketika memasuki viewport. Ketika keluar, itu kembali ke opacity 0, jadi terlepas dari arah pengguliran Anda akan selalu ada umpan yang berlaku.
Akhirnya, delay
yang diterapkan secara berurutan ke setiap elemen anak membuat efek fade.
Perhatikan bagian ketiga. Header bagian tidak berada dalam bagian konten data, sehingga tidak akan memudar (sudah ada di sana).
Semua Kode
Berikut demonya:

Berikut semua kode yang kami gunakan dalam demo kami:
HTML
Konten di dalam
bla bla bla
< /section>
Konten di dalam
bla bla bla
</ section>
Jelajahi & Temukan
Konten di dalam
bla bla bla
CSS
@media (tinggi minimum: 30em) { main { scroll-snap-type: y wajib; tinggi: 100vh; overflow-y: gulir; } } .bagian { warna: putih; posisi: relatif; scroll-snap-align: tengah; tampilan: fleksibel; arah fleksibel: kolom; min-tinggi: 100vh; } @media (tinggi minimum: 30em) { .section { tinggi: 100vh; } } @media (tinggi minimum: 30em) { .section__content > * { opacity: 0; mengubah: translate3d(0, 4rem, 0); transisi: opacity 800ms var(–delay), mengubah 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(–delay); } } .is-terlihat .section__content > * { opacity: 1; mengubah: translate3d(0, 1rem, 0); } .is-terlihat .section__img { opacity: 0.75; }
JS
bagian const = […document.querySelectorAll(“section”)]; let options = { rootMargin: “0px”, ambang batas: 0,75, }; const callback = (entri, pengamat) => { entries.forEach((entry) => { const { target } = entri; if (entry.intersectionRatio >= 0.75) { target.classList.add(“is-visible”) ; } else { target.classList.remove(“terlihat”); } }); }; const observer = new IntersectionObserver(callback, options); section.forEach((bagian, indeks) => { const sectionChildren = […section.querySelector(“[data-content]”).anak]; sectionChildren.forEach((el, index) => { el.style.setProperty(“–delay”, `${index * 250}ms`); }); observer.observe(section) ; });
Kesimpulan
Ini adalah alternatif fullpage.js sempurna yang tidak hanya berhenti di antara bagian layar penuh. Kami juga menggunakan API pengamat persimpangan untuk memahami saat bagian memasuki halaman dan kemudian menerapkan animasi terhuyung-huyung secara dinamis. Anda dapat menggunakan contoh dasar ini untuk membangun dan membuat beberapa efek yang sangat keren dengan vanilla JS dan CSS yang minimal.
[ad_2]