Gambaran keseluruhan teknologi tatal

Teknologi animasi menatal web telah wujud selama bertahun -tahun dan telah semakin banyak digunakan dalam beberapa tahun kebelakangan ini. Ini mungkin sebahagiannya dikaitkan dengan peningkatan prestasi peranti dan keupayaan untuk mengendalikan kesan animasi yang lebih baik.

Artikel ini bertujuan untuk menggariskan pelbagai teknologi yang berkaitan dengan skrol dan menyediakan panduan pemilihan alat untuk membantu anda mencari penyelesaian yang betul. Teknologi ini boleh dibahagikan kepada dua kategori: teknik untuk tingkah laku dan teknik menatal spesifik untuk tingkah laku menatal yang lebih umum .

Teknik untuk tingkah laku menatal tertentu

Pelayar moden menyokong beberapa kesan menatal CSS asli yang mudah, yang dalam beberapa kes penggunaan terhad cukup untuk memenuhi keperluan animasi menatal anda.

position: sticky

Jika anda hanya memerlukan elemen pada halaman untuk tinggal di kedudukan yang sama semasa menatal, menggunakan position: sticky adalah pilihan yang baik. Ia mudah dan mudah dan dibina ke dalam pelayar moden. Walau bagaimanapun, pelayar IE dan beberapa pelayar mudah alih memerlukan sokongan polyfill.

CSS Parallax

Ini tidak begitu banyak teknik sebagai silap mata, tetapi sangat praktikal untuk kesan paralaks mudah, anda boleh mempunyai bahagian yang berlainan dari skrol halaman pada kelajuan yang berbeza. Kelemahan terbesar ialah sukar untuk memahami nilai -nilai yang digunakan untuk menetapkan perspektif dan transformasi untuk mencapai kesan paralaks yang tepat.

CSS menatal titik penangkapan

Titik snapping tatal membolehkan penyemak imbas untuk menangkap kedudukan tatal tertentu yang anda tetapkan selepas pengguna selesai menatal secara normal. Ini membantu memastikan unsur -unsur tertentu dapat dilihat. Walau bagaimanapun, API masih berubah, jadi pastikan anda menggunakan API terkini dan berhati -hati untuk tidak bergantung kepadanya dalam pengeluaran.

Menatal licin

Menggunakan window.scrollTo() Dalam atribut JavaScript atau scroll-behavior dalam CSS, skrol licin disokong secara asli apabila melompat ke pelbagai bahagian dalam halaman. Pada masa ini, tidak semua penyemak imbas secara asli menyokong menatal lancar sejagat dengan operasi roda tetikus yang licin. Pelbagai perpustakaan JavaScript cuba menambah sokongan menatal yang lancar untuk operasi roda tetikus, tetapi saya tidak menemui perpustakaan yang benar-benar bebas dan berfungsi dengan baik dengan semua teknik menatal yang lain. Juga, menatal licin itu sendiri tidak selalu menjadi pilihan yang baik.

Teknik untuk tingkah laku menatal sejagat

Pada masa ini, adalah mustahil untuk mencipta atau mencetuskan animasi sejagat berdasarkan kedudukan skrol menggunakan hanya CSS (walaupun terdapat cadangan yang boleh menyokong beberapa bentuk animasi menatal sejagat universal CSS di masa depan yang jauh), atau untuk memadamkan sebahagian daripada animasi. Oleh itu, jika anda ingin menghidupkan unsur -unsur semasa menatal, anda perlu menggunakan sekurang -kurangnya beberapa JavaScript untuk membuat kesan yang dikehendaki. Terdapat dua cara utama untuk mencetuskan animasi ketika menatal menggunakan JavaScript: menggunakan silang-penonton dan menggunakan acara tatal .

IntersectionObserver

Cross-Observers berguna jika anda hanya memerlukan maklumat mengenai sama ada elemen itu dapat dilihat dalam viewport dan seberapa baik ia dapat dilihat. Ini menjadikan mereka pilihan yang baik untuk mendedahkan animasi. Walau bagaimanapun, terdapat beberapa kesukaran (walaupun tidak mustahil) menggunakan penonton silang, seperti mencetuskan animasi yang berbeza berdasarkan arah elemen memasuki viewport. Cross-viewer tidak begitu membantu sama ada jika anda ingin melakukan apa-apa animasi menatal apabila elemen adalah antara titik permulaan dan akhir dan tidak bertindih dengannya.

Gunakan acara menatal

Menggunakan acara tatal akan memberi anda kebebasan terbesar dalam mengawal animasi tatal. Ia membolehkan anda mempengaruhi unsur -unsur apabila menatal tanpa mengira kedudukan elemen dalam viewport, dan menetapkan titik permulaan dan akhir tepat mengikut keperluan projek anda.

Bahawa dikatakan, jika ia tidak mendahului dengan betul dan tidak ada API yang mudah untuk mewujudkan tingkah laku tertentu, ia juga boleh memberi impak besar kepada prestasi. Inilah sebabnya mengapa ia sering membantu menggunakan perpustakaan menatal yang baik untuk membantu anda mengendalikan pendikit dan menyediakan API yang lebih mudah untuk digunakan. Sesetengah perpustakaan juga boleh mengendalikan banyak isu saiz semula untuk anda!

Alat untuk mewujudkan tingkah laku menatal sejagat

Terdapat beberapa perpustakaan menatal keseluruhan yang cuba memberi anda kawalan penuh ke atas animasi menatal tanpa perlu melakukan semua pengiraan sendiri.

Scrollmagic

Scrollmagic menyediakan API yang agak mudah untuk membuat pelbagai kesan menatal dan boleh dikaitkan dengan perpustakaan animasi yang berbeza seperti GSAP dan Velocity.js. Walau bagaimanapun, ia telah kurang dan kurang penyelenggaraan sejak beberapa tahun kebelakangan, yang telah membawa kepada penciptaan scrollscene.

Scrollscene

Scrollscene pada dasarnya adalah pembungkus yang cuba membuat scrollmagic dan/atau penonton silang lebih mudah digunakan. Ia menggunakan versi scrollmagic yang tersuai, dan menambah ciri -ciri tambahan seperti main balik video, titik putus permulaan adegan, dan titik putus masa adegan. Ia juga menggunakan GSAP.

Scrolltrigger

Scrolltrigger adalah plugin Greensock rasmi untuk GSAP. Ia mempunyai senarai panjang ciri dan mempunyai API yang paling mudah digunakan di mana -mana perpustakaan menatal (sekurang -kurangnya untuk saya). Dengan itu, anda mempunyai kawalan penuh untuk menentukan kedudukan permulaan dan akhir animasi menatal, animasi apa -apa (WebGL, Canvas, SVG, DOM, dll.) Semasa menatal, elemen pin di tempat apabila animasi sedang berjalan, dan banyak lagi. Anda juga boleh menyambungkannya ke perpustakaan menatal yang lancar dan mereka akan bekerjasama dengan sempurna. Di samping itu, ia disokong oleh forum Greensock dan Greensock.

Patut disebut: Skrol lokomotif

Walaupun ia tidak cuba untuk menjadi perpustakaan menatal yang komprehensif seperti perpustakaan lain yang disebutkan di atas, Locomotive Scroll memberi tumpuan kepada menyediakan tatal lancar adat. Anda juga boleh menghidupkan beberapa sifat objek DOM dengan menambahkan atribut data, atau mengaitkan ke acara onscroll untuk menghidupkan jenis objek lain.

Meringkaskan

Untuk beberapa kesan animasi tatal tertentu, seperti kedudukan melekit dan paralaks, teknologi CSS mungkin mencukupi, sekurang -kurangnya apabila menggunakan polyfill untuk menyokong pelayar yang tidak menyokong sifat -sifat ini.

Saya biasanya mengesyorkan menggunakan scrolltrigger GSAP kerana ia boleh melakukan segala yang boleh dilakukan oleh harta CSS, dan banyak lagi. ScrollTrigger akan mengendalikan sokongan dan pengiraan penyemak imbas supaya anda boleh memberi tumpuan kepada animasi!

Jadual berikut menyenaraikan alat yang boleh anda gunakan untuk membuat kesan tertentu:

(Jadual harus dimasukkan di sini untuk membandingkan aspek yang berbeza dari pelbagai teknologi menatal, seperti prestasi, kemudahan penggunaan, fungsi, dan lain -lain)

Atas ialah kandungan terperinci Gambaran keseluruhan teknologi tatal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!