Ikhtisar teknologi gulir

Animasi yang berkaitan dengan menggulir halaman web telah ada selama bertahun-tahun. Baru-baru ini, animasi seperti itu menjadi lebih umum. Mungkin bagian dari ini adalah karena perangkat yang digunakan untuk berselancar di Internet telah menjadi lebih kuat. Perangkat ini mampu menangani dan mengeluarkan lebih banyak efek visual secara normal daripada sebelumnya. Ada banyak teknologi pengguliran. Tujuan artikel ini adalah untuk memberikan gambaran umum tentang teknologi dan alat-alat yang akan membantu Anda memilih dan menciptakan apa yang Anda butuhkan dalam setiap situasi tertentu. Saya akan membagi teknologi pengguliran menjadi dua kategori besar. Yang pertama mencakup teknologi untuk menerapkan mekanisme gulir tertentu, dan yang kedua mencakup teknologi gulir tujuan umum.

Teknologi untuk implementasi mekanisme pengguliran tertentu

Ada beberapa efek pengguliran standar sederhana dalam CSS yang didukung oleh peramban modern. Dalam beberapa kasus, penggunaannya mungkin cukup untuk memenuhi kebutuhan khusus suatu proyek.

Posisi properti ▍CSS: lengket

Jika Anda memerlukan elemen untuk tidak menggulir bersama dengan sisa konten halaman, maka ketika menata elemen ini, cukup untuk menerapkan properti position: sticky. Ini adalah trik sederhana dan dapat dimengerti, dukungannya dibangun di browser modern. Tetapi agar ini berfungsi di IE dan beberapa peramban seluler, Anda memerlukan polyfill. Jika Anda tertarik dengan topik ini, lihat materi ini .





Elemen biru "bersandar" di bagian atas wadah dan tidak menggulir bersama elemen lainnya.



Berikut ini adalah demonstrasi pengguliran tersebut.

Efek paralaks

Efek paralaks bukan merupakan teknologi khusus, tetapi teknik khusus. Tapi, bagaimanapun juga, efek ini bisa sangat berguna dalam kasus-kasus di mana Anda perlu menggulir berbagai bagian halaman dengan kecepatan yang berbeda. Teknik ini dijelaskan dengan baik dalam materi ini . Ada banyak contoh implementasinya. Misalnya - yang ini . Bagi saya, kelemahan utama dari teknik ini adalah sulit untuk memahami nilai-nilai mana, yang memberikan efek paralaks yang benar, yang harus digunakan untuk menyesuaikan perspektif dan transformasi.





Efek paralaks: elemen bergerak dengan kecepatan berbeda.



Ini adalah demo efek parallax.

▍ Gulir ke titik tertentu

Menggunakan pengguliran dengan titik jangkar memungkinkan peramban secara otomatis menyesuaikan posisi elemen dengan memindahkannya ke posisi tertentu setelah pengguna menyelesaikan operasi pengguliran normal. Ini dapat berguna dalam kasus-kasus di mana perlu bahwa setelah menyelesaikan pengguliran, elemen tertentu akan sepenuhnya berada di bidang penglihatan pengguna. Namun, API yang sesuai masih tidak stabil , jadi cobalah untuk menggunakan implementasi terbaru dan berhati-hatilah dalam menggunakan pendekatan ini untuk menggulir dalam produksi. Berikut ini adalah artikel yang bagus tentang masalah ini.





Jika pengguna menggulir konten dan memindahkan elemen dari batas atas wadah, browser akan secara otomatis memposisikan ulang elemen sehingga terlihat secara keseluruhan.



Berikut adalah demonstrasi cara menggulir bekerja dengan titik jangkar.

▍Gulir halus

Pengguliran halus didukung oleh alat peramban saat menggulir ke bagian tertentu menggunakan metode window.scrollTo () dalam JavaScript, atau bahkan menggunakan properti CSS perilaku-gulir . Saat ini, perpustakaan JavaScript khusus diperlukan untuk menerapkan pengguliran halus dengan gerakan roda mouse yang lebih halus. Tetapi ketika menggunakan perpustakaan seperti itu, Anda perlu memastikan interaksi normal dengan teknologi gulir lainnya. Selain itu, penggunaan pengguliran halus tidak selalu merupakan ide yang baik.

Teknologi Pengguliran Umum

Saat ini tidak ada satu-satunya cara CSS untuk memicu semua animasi tujuan umum berdasarkan posisi scroll (walaupun ada proposal bahwa kami mungkin memiliki beberapa animasi tujuan umum yang dapat kami lakukan di masa depan yang jauh) . Akibatnya, jika Anda ingin menghidupkan elemen ketika mereka menggulir, Anda harus setidaknya menggunakan beberapa kode JavaScript untuk mencapai efek yang diinginkan. Ada dua metode untuk menggunakan JavaScript untuk menghidupkan elemen saat mereka menggulir. Yang pertama adalah menggunakan Intersection Observer API, yang kedua adalah untuk menangani acara tersebut scroll.

▍Menggunakan API Pengamat titik-temu

API IntersectionObserver memungkinkan Anda berhasil menyelesaikan berbagai tugas yang berkaitan dengan pengguliran, jika semua yang diperlukan untuk memulai animasi adalah mengetahui apakah suatu elemen terlihat di viewport, serta bagian elemen apa yang terlihat. ... Ini membuat IntersectionObserver API alat yang hebat untuk meluncurkan animasi yang menyertai tampilan elemen di layar. Namun demikian, beberapa efeknya sangat sulit (walaupun mungkin) diimplementasikan menggunakan API ini. Misalnya, ini adalah peluncuran animasi yang berbeda tergantung pada arah gerakan elemen. API ini, di samping itu, tidak terlalu berguna dalam situasi di mana, saat menggulir, Anda harus memulai animasi ketika elemen berada di suatu tempat di tengah viewport, yaitu, ia tidak muncul di viewport atau menghilang darinya.

▍Menggunakan acara gulir

Bagi mereka yang, untuk implementasi animasi selama pengguliran, gunakan acara scroll, ada peluang yang sangat besar. Teknik ini memungkinkan, saat menggulir, untuk bertindak pada elemen di posisi mana pun dari elemen tersebut relatif terhadap batas area tampilan. Dengan menggunakan acara tersebut scroll, Anda dapat dengan sangat akurat, sesuai dengan kebutuhan proyek, mengatur posisi awal dan akhir animasi.



Mengingat hal ini, perlu dicatat bahwa pendekatan ini untuk animasi bergulir dapat membuat beban yang cukup besar pada sistem. Ini terjadi jika pengembang tidak peduli dengan kinerja dan tidak membatasi frekuensi pemrosesan acara scroll. Selain itu, siap membantu programmer yang memutuskan untuk menggunakan acara tersebutscroll, tidak akan ada API yang nyaman yang memungkinkan untuk mengimplementasikan berbagai skrip gulir. Itulah sebabnya sering, alih-alih menerapkan mekanisme penanganan acara scrollsendiri, masuk akal untuk menggunakan perpustakaan khusus, yang penulisnya telah menangani dampak scrollkinerja penanganan acara dan API. Beberapa perpustakaan ini bahkan dapat membantu pengembang ketika ada masalah dengan ukuran elemen.

Alat gulir tujuan umum

Ada beberapa perpustakaan gulir yang kuat yang bertujuan untuk memberikan pengembang kontrol penuh atas animasi yang dilakukan saat menggulir halaman, serta untuk membuat hidup semudah mungkin bagi pengembang tanpa memaksanya untuk melakukan perhitungan yang rumit sendiri.

▍ScrollMagic

Pustaka ScrollMagic memberi kami API yang relatif sederhana yang memungkinkan kami membuat berbagai efek gulir. Pustaka ini dapat bekerja dengan berbagai pustaka animasi seperti GSAP dan Velocity.js . Namun, dalam beberapa tahun terakhir perpustakaan ini tidak didukung dengan baik. Ini mengarah pada penciptaan perpustakaan ScrollScene.

▍ScrollScene

ScrollScene , pada dasarnya, adalah pembungkus yang bertujuan untuk meningkatkan kegunaan perpustakaan ScrollMagic dan / atau API IntersectionObserver. Ini menggunakan versi sendiri dari ScrollMagic, yang memiliki dukungan lebih baik daripada perpustakaan biasa. Ada fitur tambahan seperti memutar video dan mendukung breakpoint yang memengaruhi animasi. Selain itu, perpustakaan ini menggunakan GSAP.

▍ScrollTrigger

Perpustakaan ScrollTrigger adalah plugin GreenSock resmi untuk GSAP. Perpustakaan ini memiliki besar set fitur, API tampaknya saya untuk menjadi API sederhana dari bergulir perpustakaan yang ada. Menggunakan perpustakaan ini, Anda memiliki kontrol penuh atas di mana animasi bergulir dimulai dan berakhir, Anda dapat menghidupkan apa pun yang Anda suka saat menggulir (WebGL, kanvas, SVG, DOM), Anda dapat menyematkan elemen selama durasi animasi. Kemampuan perpustakaan ini tidak terbatas pada ini. GreenSock juga mendukung pustaka ini, dan Anda bisa mendapatkan bantuan menggunakannya di forum GreenSock.

▍Perpustakaan yang layak disebutkan: Gulir Lokomotif

Pustaka Scroll Lokomotif tidak berusaha untuk menyediakan serangkaian fitur seluas perpustakaan lain yang telah kita diskusikan. Tujuan utamanya adalah untuk menerapkan pengguliran yang lancar. Selain itu, Anda dapat menganimasikan beberapa properti objek DOM menggunakan atribut data-*, atau menggunakan pawang onscrolluntuk menghidupkan objek dari tipe lain.

Perbandingan teknologi dan alat

Berikut ini adalah perbandingan teknologi pengguliran.





Berikut ini adalah perbandingan dari perpustakaan yang ditinjau.

Ringkasan

Untuk menerapkan beberapa mekanisme pengguliran khusus, seperti elemen pinning dan efek paralaks, kemampuan standar CSS mungkin cukup. Paling tidak, ini benar, asalkan Anda menggunakan polyfill untuk browser yang tidak mendukung fitur CSS yang sesuai.



Saya biasanya merekomendasikan menggunakan perpustakaan ScrollTrigger untuk menyesuaikan pengguliran. Ini memungkinkan Anda untuk mencapai semua yang mampu dilakukan oleh CSS murni, dan juga banyak lagi. Perpustakaan ini menangani dukungan browser dari berbagai teknologi, memfasilitasi pelaksanaan perhitungan, yang memungkinkan mereka yang menggunakannya untuk sekadar menjalankan bisnis mereka.



Teknologi apa yang Anda gunakan saat mengatur pengguliran dalam proyek Anda?