Penggunaan animasi web yang bijak dapat meningkatkan pengalaman pengguna dan meningkatkan rayuan laman web. Tetapi jika elemen animasi terletak di bawah halaman, pengguna mungkin terlepasnya. Artikel ini akan memperkenalkan cara menggunakan JavaScript asli untuk melaksanakan animasi yang dicetuskan skrol, supaya animasi hanya akan mula bermain apabila pengguna menatal ke elemen tertentu, mengelakkan pembaziran sumber dan meningkatkan pengalaman pengguna.
Kami tidak perlu bergantung kepada perpustakaan pihak ketiga, kami boleh mencapainya dengan hanya sedikit kod JavaScript asli. Inti terletak pada menggunakan API Observer Persimpangan , yang dapat mengesan sama ada elemen sasaran memasuki tetingkap.
Pendekatan kami merangkumi:
scrollTrigger
untuk mengendalikan peristiwa pencetus tatal untuk elemen tertentu..active
..active
Class.Di samping itu, kita perlu menyokong fungsi panggilan balik tersuai untuk melakukan tindakan tertentu apabila elemen dapat dilihat, sebagai contoh:
scrolltrigger ('loader', { CB: Fungsi (EL) { el.innertext = 'Memuatkan ...' LoadContent () } })
Akhirnya, kami juga akan berurusan dengan tidak menyokong API Observer Persimpangan oleh pelayar yang lebih tua.
API Observer Persimpangan membolehkan kita secara tidak sengaja memerhatikan keadaan persimpangan elemen sasaran dan tingkap, yang lebih cekap daripada mendengar peristiwa menatal.
Pertama, buat fungsi scrollTrigger
, yang menerima pemilih sebagai parameter:
fungsi scrolltrigger (pemilih) { biarkan els = document.QuerySelectorAll (pemilih); els = array.from (els); els.foreach (el => { AddObserver (EL); }); } // Gunakan contoh scrolltrigger ('. Scroll-reveal');
Seterusnya, buat fungsi addObserver
dan gunakan pemerhati persimpangan untuk mendengar unsur -unsur:
fungsi scrolltrigger (pemilih) { biarkan els = document.QuerySelectorAll (pemilih); els = array.from (els); els.foreach (el => { AddObserver (EL); }); } fungsi addObserver (el) { Biarkan Observer = New IntersectionObserver ((Entri, Observer) => { entri.Foreach (entry => { jika (entry.isintersecting) { entry.target.classlist.add ('aktif'); Observer.unobserve (entry.target); } }); }); Observer.observe (EL); } // Gunakan contoh scrolltrigger ('. Scroll-reveal');
Kod di atas akan menambah .active
Kelas aktif apabila bahagian elemen dapat dilihat. Untuk lebih banyak kawalan yang baik, kita boleh menggunakan parameter options
pemerhati persimpangan:
fungsi scrolltrigger (pemilih, options = {}) { biarkan els = document.QuerySelectorAll (pemilih); els = array.from (els); els.foreach (el => { AddObserver (EL, Pilihan); }); } fungsi addObserver (el, options) { Biarkan Observer = New IntersectionObserver ((Entri, Observer) => { entri.Foreach (entry => { jika (entry.isintersecting) { entry.target.classlist.add ('aktif'); Observer.unobserve (entry.target); } }); }, pilihan); Observer.observe (EL); } // Gunakan contoh scrolltrigger ('. Scroll-reveal', { rootmargin: '-200px' });
Sekarang, kami telah mencapai dua gol pertama. Seterusnya, tambahkan sokongan fungsi panggil balik:
fungsi scrolltrigger (pemilih, options = {}) { biarkan els = document.QuerySelectorAll (pemilih); els = array.from (els); els.foreach (el => { AddObserver (EL, Pilihan); }); } fungsi addObserver (el, options) { Biarkan Observer = New IntersectionObserver ((Entri, Observer) => { entri.Foreach (entry => { jika (entry.isintersecting) { jika (options.cb) { options.cb (EL); } else { entry.target.classlist.add ('aktif'); } Observer.unobserve (entry.target); } }); }, pilihan); Observer.observe (EL); } // Gunakan contoh scrolltrigger ('loader', { rootmargin: '-200px', CB: Fungsi (EL) { el.innertext = 'memuatkan ...'; setTimeout (() => { el.innertext = 'Tugas selesai! '; }, 1000); } });
Akhirnya, berurusan dengan keserasian penyemak imbas warisan:
fungsi scrolltrigger (pemilih, options = {}) { biarkan els = document.QuerySelectorAll (pemilih); els = array.from (els); els.foreach (el => { AddObserver (EL, Pilihan); }); } fungsi addObserver (el, options) { jika (! ('intersectionobserver' dalam tetingkap)) { jika (options.cb) { options.cb (EL); } else { el.classlist.add ('aktif'); } kembali; } Biarkan Observer = New IntersectionObserver ((Entri, Observer) => { entri.Foreach (entry => { jika (entry.isintersecting) { jika (options.cb) { options.cb (EL); } else { entry.target.classlist.add ('aktif'); } Observer.unobserve (entry.target); } }); }, pilihan); Observer.observe (EL); } // Gunakan contoh scrolltrigger ('. Intro-teks'); Scrolltrigger ('. Scroll-Reveal', { rootmargin: '-200px', }); scrolltrigger ('loader', { rootmargin: '-200px', CB: Fungsi (EL) { el.innertext = 'memuatkan ...'; setTimeout (() => { el.innertext = 'Tugas selesai! '; }, 1000); } });
Melalui langkah-langkah di atas, kami berjaya mencapai kesan animasi yang dicetuskan tatal dan mengambil kira keserasian penyemak imbas. Saya harap artikel ini dapat membantu anda meningkatkan pengalaman pengguna laman web anda.
Atas ialah kandungan terperinci Cara membuat animasi yang dicetuskan tatal dengan JavaScript Asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!