Membuat animasi berasaskan tatal menggunakan jQuery dan CSS3

Membuat pergerakan adalah cara yang baik untuk memberikan pengalaman yang menarik dan interaktif untuk penonton anda. Dengan laman web moden yang memberikan kesepakatan interaktiviti yang lebih besar, ia menjadi semakin diharapkan bahawa walaupun laman web mudah akan menawarkan beberapa tahap animasi / pergerakan untuk melibatkan pelawat mereka.

Hari ini saya akan menggariskan teknik yang anda boleh menyesuaikan diri dengan projek web anda-mencetuskan animasi ketika menatal ke rantau yang telah ditetapkan. Animasi ini akan dibuat menggunakan transformasi CSS dan peralihan CSS. Kami juga akan menggunakan jQuery untuk mengesan apabila unsur -unsur dapat dilihat dan menambah/mengeluarkan kelas yang sesuai.

Bagi mereka yang ingin melihat contoh -contoh ini dalam tindakan, anda boleh melompat terus ke demo.

Takeaways Key

Animasi berasaskan skrol boleh dibuat menggunakan jQuery dan CSS3, memberikan pengalaman interaktif untuk penonton. Animasi ini dicetuskan apabila tatal pengguna ke rantau yang telah ditetapkan, menjadikannya lebih menarik dan menarik secara visual.
Teknik ini melibatkan penggunaan transformasi CSS dan peralihan CSS, dengan jQuery digunakan untuk mengesan apabila elemen dapat dilihat dan menambah/mengeluarkan kelas yang sesuai. Pertimbangan untuk pendekatan ini termasuk keserasian penyemak imbas dan kelajuan, dengan pelayar moden yang menyokong transformasi 2D dan 3D untuk animasi yang lancar.
Proses ini melibatkan mengesan elemen animasi dalam pandangan, mengaitkan ke dalam acara tatal, mengendalikan saiz semula, dan mengira ketinggian dan lebar elemen. Animasi boleh dicetuskan apabila elemen berada di dalam viewport, yang membolehkan transformasi atau kesan tambahan untuk dirantai untuk antara muka interaktif.
Contoh animasi tatal termasuk gelongsor unsur-unsur dari kiri, unsur-unsur pudar dari bawah ke atas, dan pelbagai langkah memantul animasi. Teknik ini boleh disesuaikan untuk pelbagai projek web, seperti memaparkan profil kakitangan atau maklumat kursus.

mengapa mencetuskan animasi pada tatal?

Sebab utama kita mahu mencetuskan animasi pada tatal, supaya mereka mengaktifkan sama seperti pengguna menatal elemen ke dalam pandangan.

Kami mungkin mahu memudar unsur -unsur, atau memberikan transformasi yang menarik dan ini hanya akan masuk akal apabila pengguna benar -benar dapat melihatnya.

animasi dengan CSS atau dengan jQuery?

Terdapat kebaikan dan keburukan untuk setiap pendekatan. JQuery (baca JavaScript) membolehkan anda menghidupkan perkara -perkara yang CSS tidak (seperti kedudukan tatal, atau atribut elemen), manakala animasi CSS boleh menjadi sangat menarik bagi pemaju yang lebih suka meletakkan semua animasi dan logik persembahan mereka dalam CSS lapisan.

Saya akan menggunakan transformasi melalui CSS, namun selalu ada pembolehubah untuk dipertimbangkan bergantung pada keadaan anda. Saya akan mengambil kira faktor berikut:

Keserasian penyemak imbas

Oleh kerana penyelesaian kami akan berdasarkan transformasi, keserasian pelayar kami akan terhad kepada mereka yang menyokong sama ada transformasi 2D atau transformasi 3D.

Semua pelayar moden akan menyokong transformasi 3D dan beberapa pelayar warisan yang lebih tua seperti Internet Explorer 9 dan Opera 11.5 akan menyokong transformasi 2D. Sokongan keseluruhan untuk kedua -dua desktop dan pelayar mudah alih adalah komprehensif.

Kaedah Animate JQuery berfungsi dalam pelayar (waras), dengan syarat anda menggunakan versi 1.x perpustakaan. JQuery 2.x Sokongan dikeluarkan untuk IE8 dan ke bawah, jadi hanya gunakan ini jika anda tidak perlu menyokong pelayar warisan (bertuah anda!).

kelajuan

Kami mahu animasi yang cepat dan lancar, terutamanya ketika datang ke peranti mudah alih. Oleh itu, yang terbaik untuk menggunakan peralihan dan transformasi jika mungkin.

Contohnya akan menggunakan transformasi 3D dengan 2D jatuh untuk penyemak imbas yang lebih tua. Kami mahu memaksa pecutan perkakasan untuk kelajuan, jadi transformasi 3D adalah suatu keharusan (kami akan menggunakan Translate3D bersama -sama dengan fungsi lain yang menyebabkan GPU dipercepat rendering).

Kaedah Animate JQuery jauh lebih perlahan daripada transformasi bantuan GPU, jadi kami hanya akan menggunakan jQuery untuk pengendalian / pengiraan acara kami, bukan untuk animasi kami sendiri (seperti yang kita mahu mereka menjadi lancar).

nota sampingan

kita semua tahu bahawa jQuery! == JavaScript, kan? Nah, ternyata menggunakan vanila JS untuk animasi mungkin tidak menjadi idea yang buruk selepas semua. Walaupun yang berada di luar skop tutorial ini, berikut adalah dua artikel yang sangat baik mengenai subjek bagi mereka yang berminat untuk mengetahui lebih lanjut:

CSS vs JS Animation: Mana yang lebih cepat?
Busting Mitos: Animasi CSS vs JavaScript

kini kembali ke persembahan ...

mengesan elemen animasi dalam pandangan

Titik keseluruhan teknik ini adalah untuk melihat melalui semua elemen kami yang kami tandakan sebagai animatable dan kemudian menentukan sama ada mereka sedang dalam viewport. Mari kita melangkah bagaimana kita akan mencapai ini:

pemilih Caching

Scrolling adalah perniagaan yang mahal. Jika anda melampirkan pendengar acara ke acara tatal, ia akan membakar banyak kali apabila pengguna menatal halaman. Memandangkan kami akan memanggil fungsi dimensi / pengiraan kami apabila tatal pengguna, adalah idea yang baik untuk menyimpan unsur -unsur yang dikembalikan oleh pemilih kami dalam pembolehubah. Ini dikenali sebagai pemilih caching dan mengelakkan kami menanyakan dom berulang kali.

Dalam skrip kami, kami akan merujuk kedua -dua objek tetingkap dan koleksi unsur -unsur yang kami mahu bernyawa.

<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>

Perhatikan tanda dolar di hadapan pembolehubah. Ini adalah konvensyen untuk menunjukkan bahawa mereka memegang objek jQuery, atau pengumpulan objek.

mengaitkan ke dalam acara tatal

Seterusnya, kami membuat pengendali acara kami yang mendengar acara tatal. Ini akan membakar apabila kita menatal halaman. Kami menyampaikannya kepada fungsi check_if_in_view kami (yang akan kami dapatkan dalam satu minit). Setiap kali acara tatal dipecat, fungsi ini akan dilaksanakan.

<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>

Pengendalian saiz semula

Kerana kita mengira ketinggian dan lebar kita perlu faktor perubahan orientasi bersama dengan saiz semula umum.

Kami boleh mengemas kini pengendali acara kami untuk mendengar kedua -dua skrol dan mengubah saiz acara. Ini akan membolehkan fungsi pengesanan kami berfungsi apabila kami mengubah saiz atau menukar orientasi.

$<span>window.on('scroll', check_if_in_view);</span>

Di samping itu, kami juga menggunakan kaedah pencetus jQuery untuk mencetuskan acara tatal sebaik sahaja DOM siap. Kami melakukan ini supaya jika mana -mana elemen yang sepatutnya animasi berada dalam viewport, mereka akan dikesan seperti yang dilihat dan animasi yang digunakan seolah -olah kami telah menatal.

$<span>window.on('scroll resize', check_if_in_view);</span>

Pengesanan kedudukan tatal

Bahagian pengesanan sebenar contoh ini berasal dari skrip berikut.

$<span>window.trigger('scroll');</span>

mari memecahkan apa yang berlaku di sini.

fungsi check_if_in_view dipanggil pada mulanya apabila DOM siap dan kemudian setiap kali kita mengubah saiz atau tatal.

kami mendapat ketinggian semasa tetingkap, bersama dengan kedudukan atas dan bawahnya sehingga kami tahu kawasan yang kami lihat.

kita pergi dan mencari semua item yang akan menghidupkan (disimpan dalam pembolehubah $ animasi_elements). Bagi setiap elemen ini, kami mengumpulkan ketinggiannya bersama dengan kedudukan atas dan bawahnya (jadi kami tahu di mana ia tinggal di halaman).

Kami membandingkan setiap item untuk melihat sama ada kedudukan bawahnya lebih besar daripada kedudukan teratas tetingkap tetapi juga bahawa kedudukan atas item kurang daripada kedudukan bawah tetingkap.

Berikut adalah contoh visual

mengira ketinggian dan lebar

Dalam fungsi pengesanan kami, kami perlu mendapatkan ketinggian dan kedudukan pelbagai elemen untuk mengira perkara dengan betul, ini adalah di mana kami telah menggunakan fungsi ketinggian jQuery. Adalah penting untuk mengalami pecahan bagaimana fungsi ketinggian ini berfungsi

ketinggian () dan lebar ()

fungsi ketinggian () dan lebar () mengembalikan ketinggian atau lebar elemen. Mereka mengecualikan semua padding, sempadan dan margin.

Untuk pecahan penuh melawat dokumentasi ketinggian atau lebar.

innerheight () dan innerWidth ()

fungsi innerheight () dan innerWidth () mengembalikan ketinggian atau lebar elemen termasuk padding tambahan (namun ia tidak termasuk kedua -dua sempadan dan margin)

Untuk pecahan penuh lawati dokumentasi innerheight atau innerwidth.

outerheight () dan oUerberwidth ()

fungsi outerheight () dan oUerberwidth () mengembalikan ketinggian atau lebar elemen dan termasuk padding dan sempadannya.

Di samping itu, anda juga boleh menentukan untuk memasukkan marginnya dengan meluluskan nilai yang benar kepada fungsi.

untuk pecahan penuh Lawati dokumentasi outerheight atau oUterwidth

Contoh animasi tatal

Disenaraikan di bawah adalah satu siri animasi yang menggunakan asas -asas apa yang telah kita bincangkan. Contoh-contoh ini akan mencari elemen animasi dan menggunakan kelas dalam pandangan aktif apabila mereka berada dalam pandangan.

unsur-unsur yang anda ingin bergerak harus semua mempunyai kelas standard seperti elemen animasi yang menetapkan kedudukannya menjadi relatif atau mutlak. Di samping itu, jika anda akan membuat pelbagai kesan, anda boleh membuat kelas yang sepadan seperti slaid-kiri yang boleh digabungkan dengan kelas dalam pandangan. Anda kemudiannya harus memohon transformasi ke kelas seperti elemen animasi.slide- left.inview

luncurkan dari kiri

Untuk contoh pertama kami, kami akan meluncur di unsur -unsur dari kiri apabila mereka memasuki Viewport. Kami mencapai ini dengan menggunakan terjemahan3D pada paksi unsur -unsur kami.

Lihat animasi pena CSS pada tatal - slaid dari kiri oleh SitePoint (@SitePoint) pada codepen.

Dalam contoh ini kami telah menggunakannya untuk memaparkan profil kakitangan, tetapi anda boleh memanfaatkan semula fungsi yang sama untuk meluncur dalam mana-mana unsur yang anda perlukan.

pudar dari bawah

Kali ini kita akan memudar unsur -unsur kita dari bawah ke atas sebagai skrol pengguna. Kami mencapai ini melalui Terjemahan3D pada paksi Y elemen.

Untuk contoh ini saya telah menyenaraikan maklumat kursus mengenai topik dalam struktur grid. Apabila pengguna menatal ke bawah, setiap kad yang dipandang akan memudar dan bergerak ke atas, memaparkan maklumat mengenai kursus.

Lihat animasi pena CSS pada tatal - pudar dari bawah ke atas oleh SitePoint (@SitePoint) pada codepen.

animasi memantul pelbagai langkah

Untuk contoh terakhir kami, kami akan menggunakan animasi multistage. Untuk melakukan ini, kami akan mentakrifkan animasi kekunci utama yang menggabungkan putaran dengan terjemahan. Animasi jenis ini boleh membantu mempamerkan kawasan laman web anda (untuk contoh ini kami mempamerkan profil ahli kakitangan).

Lihat animasi pena CSS pada tatal - Multi langkah langkah oleh SitePoint (@SitePoint) pada Codepen.

dari mana dari sini?

dari sini anda boleh mengambil konsep yang telah anda pelajari dan memohon kepada projek anda.

Sekarang anda boleh mengesan apabila elemen dilihat, anda boleh mengikat transformasi atau kesan tambahan untuk mewujudkan antara muka interaktif. Contohnya apabila elemen memasuki viewport (dan selepas transformasinya), anda boleh mengubah elemen tambahan seperti memudar dalam tajuk, berskala dalam imej dan lain -lain

Adakah anda sudah menggunakan kesan ini dalam projek anda? Atau adakah anda berfikir bahawa animasi terlalu banyak digunakan dan mengurangkan pengalaman pengguna? Sama ada saya suka mendengar daripada anda dalam komen.

Ambil kemahiran CSS anda ke peringkat seterusnya dengan Buku CSS Master, edisi ke -2 oleh Tiffany B. Brown - meliputi animasi CSS, peralihan, transformasi dan banyak lagi. Soalan Lazim (Soalan Lazim) Mengenai Animasi Berbasis Skrol dengan JQuery dan CSS3

Apakah keperluan asas untuk mencipta animasi berasaskan skrol menggunakan jQuery dan CSS3? Anda juga perlu mempunyai perpustakaan jQuery termasuk dalam projek anda. JQuery adalah perpustakaan JavaScript yang cepat, kecil, dan kaya ciri yang memudahkan dokumen HTML melintasi, pengendalian acara, dan animasi. CSS3, sebaliknya, adalah evolusi terkini bahasa Lembaran Gaya Cascading dan bertujuan untuk memperluaskan CSS2.1. Ia membawa banyak perkara baru yang ditunggu-tunggu, seperti sudut bulat, bayang-bayang, kecerunan, peralihan atau animasi. Mewujudkan animasi berasaskan skrol, anda perlu memasukkan perpustakaan jQuery dalam fail HTML anda. Anda boleh memuat turunnya dari laman web JQuery atau memasukkannya terus dari rangkaian penghantaran kandungan (CDN). Sebaik sahaja anda memasukkan jQuery, anda boleh mula menulis kod JavaScript anda dalam fail .js yang berasingan atau dalam tag skrip dalam fail HTML anda. Anda kemudian boleh menggunakan kaedah JQuery's .animate () untuk membuat animasi. Untuk animasi CSS3, anda boleh menggunakan kerangka kunci dan harta animasi.

Bolehkah saya mengawal kelajuan animasi berasaskan skrol dalam jQuery? dalam jQuery. Kaedah .animate () menerima parameter tempoh, yang menentukan berapa lama animasi akan dijalankan. Tempohnya ditentukan dalam milisaat; Nilai yang lebih tinggi menunjukkan animasi yang lebih perlahan, bukan yang lebih cepat.

Bagaimana saya boleh membuat animasi berasaskan skrol saya lebih lancar? -Out 'Nilai harta peralihan CSS3-fungsi-fungsi. Nilai ini menentukan bahawa animasi harus bermula dengan perlahan, mempercepatkan di tengah, dan kemudian melambatkan pada akhir. Ini dapat memberikan rasa yang lebih semula jadi dan lancar kepada animasi anda.

bagaimana saya boleh mencetuskan animasi apabila pengguna menatal ke titik tertentu pada halaman? halaman. Di dalam kaedah .scroll (), anda boleh menggunakan kaedah .scrollTop () untuk mendapatkan kedudukan menegak semasa bar tatal. Anda kemudian boleh menggunakan pernyataan jika untuk memeriksa sama ada kedudukan tatal berada di luar titik tertentu, dan jika ya, mencetuskan animasi. Boleh menggunakan animasi CSS3 tanpa jQuery. CSS3 memperkenalkan peraturan @KeyFrames dan harta animasi, yang membolehkan anda membuat animasi semata -mata menggunakan CSS. Walau bagaimanapun, jQuery dapat memberikan lebih banyak kawalan dan fleksibiliti ke atas animasi anda, seperti sifat animasi yang berubah secara dinamik berdasarkan interaksi pengguna. Anda boleh menghentikan animasi berasaskan tatal dalam jQuery menggunakan kaedah .stop (). Kaedah ini menghentikan animasi yang sedang berjalan pada elemen yang dipilih. Untuk menjeda animasi, ia agak lebih kompleks kerana jQuery tidak secara asli menyokong animasi berhenti. Walau bagaimanapun, anda boleh mencapai ini dengan menggunakan plugin atau secara manual menjejaki keadaan animasi dan kemajuan. Teknik di mana imej latar belakang bergerak lebih perlahan daripada imej latar depan, mewujudkan ilusi kedalaman. Anda boleh mencapai kesan ini menggunakan jQuery dan CSS3 dengan mengubah kelajuan pergerakan imej latar belakang berhubung dengan kelajuan skrol halaman. > Ya, anda boleh menghidupkan pelbagai sifat CSS sekaligus menggunakan kaedah JQuery's .animate (). Anda hanya perlu memasukkan sifat-sifat yang anda ingin menghidupkan sebagai pasangan nilai utama dalam parameter objek sifat dari kaedah .animate (). 🎜>

Untuk memastikan animasi berasaskan tatal anda berfungsi di seluruh pelayar yang berbeza, anda harus sentiasa menggunakan awalan vendor untuk sifat CSS3. Awalan ini memastikan bahawa sifat -sifat diiktiraf dalam semua pelayar, walaupun mereka masih eksperimen. Untuk animasi jQuery, anda tidak perlu bimbang tentang keserasian pelayar sebagai jQuery menjaga ini untuk anda.

Atas ialah kandungan terperinci Membuat animasi berasaskan tatal menggunakan jQuery dan CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!