Tambahkan animasi pada skrol menggunakan HTML, CSS dan AOS.js

AOS.js (Animasi Tatal) ialah perpustakaan JavaScript yang menyediakan animasi, menjadikannya lebih mudah untuk menambah sejumlah besar animasi hanya dengan menukar nama kelas dalam teg div yang diperlukan. Walaupun terdapat pustaka JavaScript animasi yang berbeza, AOS.js mungkin yang paling mudah daripada semuanya.

Dalam tutorial ini, kami akan meneroka pelbagai jenis animasi yang boleh anda gunakan dalam AOS.js dengan bantuan contoh yang berbeza.

Jenis animasi pertama yang akan kami terokai ialah animasi pudar. Sebelum kita berbuat demikian, kita perlu terlebih dahulu memastikan bahawa aos.css dan aos.js tersedia dalam kod kami, dan kami boleh mendapatkannya melalui pautan CDN.

Apa yang anda perlu lakukan ialah menampal coretan kod berikut di hujung teg

dalam kod HTML anda.

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Coretan kod di atas akan membantu untuk mendapatkan fail css, untuk mendapatkan fail js kita perlu menampal teg badan dalam kod HTML coretan CDN seperti yang ditunjukkan di bawah pada penghujungnya.

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
   AOS.init();
</script>

Selepas menambah dua coretan kod di atas dalam kod HTML, kita boleh menggunakan AOS dalam kod.

Gunakan animasi pudar AOS.js

Animasi pudar menyerupai tingkah laku fade-in dan fade-out, dan sejumlah 8 animasi berbeza boleh dicapai. Ini ialah -

• Pudar masuk dan keluar

• Pudar masuk dan keluar

• Pudar ke kiri

• Pudar kanan

• Pudar ke kiri

• Pudar kanan

• Pudar ke kiri

• Pudar ke kiri

Sekarang mari kita gunakannya satu demi satu dalam contoh HTML-CSS yang mudah.

Coretan kod di bawah ialah satu-satunya bahagian yang kami akan membuat perubahan pada semua animasi pudar di atas.

<div id="main">
   <div data-aos="fade-up">Something up!</div>
</div>

Dalam kod di atas, kami menghantar nilai sebagai "fade-up" kepada atribut data-aos, dan dalam semua kes fade, hanya nilai ini akan ditukar.

index.html

Sekarang, mari kita pertimbangkan fail index.html berikut di mana kita akan melaksanakan animasi "fade out" .

Contoh

   
   
   
   
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   


   

      
Something Up!
   
   
   <script>
      AOS.init();
   </script>

Apabila anda menjalankan kod di atas dalam penyemak imbas anda, anda akan melihat div yang mengandungi teks "Sesuatu Naik!"

Begitu juga, jika kita ingin melakukan animasi fade, kita boleh menggunakan yang ditunjukkan dalam coretan kod di bawah.

<div id="main">
   <div data-aos="fade-down">Something down!</div>
</div>

Kita hanya perlu menggantikan div dalam fail index.html dengan div di atas untuk mendapatkan animasi fade.

Untuk pudar ke kiri, coretan kod kelihatan seperti di bawah.

<div id="main">
   <div data-aos="fade-left">Something left!</div>
</div>

Untuk pudar, coretan kod kelihatan seperti di bawah.

<div id="main">
   <div data-aos="fade-right">Something right!</div>
</div>

Untuk Fade-up-left, coretan kod ditunjukkan di bawah.

<div id="main">
   <div data-aos="fade-up-left">Something up left!</div>
</div>

Untuk Fade-up-right, coretan kod ditunjukkan di bawah.

<div id="main">
   <div data-aos="fade-up-right">Something up right!</div>
</div>

Untuk Pudar Kiri, coretan kod kelihatan seperti di bawah.

<div id="main">
   <div data-aos="fade-down-left">Something down left!</div>
</div>

Untuk Pudar-bawah-kanan, coretan kod ditunjukkan di bawah.

<div id="main">
   <div data-aos="fade-down-right">Something down right!</div>
</div>

Pada ketika ini, kita boleh membuat kesimpulan bahawa animasi pudar dalam AOS telah selesai.

Gunakan animasi flip AOS.js

Animasi flip mensimulasikan tingkah laku flipping, dan sejumlah 4 animasi berbeza boleh dicapai. Ini ialah -

• Tatal ke atas

• Tatal ke bawah

• Selak kiri

• Belok kanan

Sekarang mari kita gunakannya satu demi satu dalam contoh HTML-CSS yang mudah.

index.html

Mari kita pertimbangkan fail index.html berikut di mana kita akan melaksanakan animasi "flip up".

   
   
   
   
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   


   

      
Flip Up!
   
   
   <script>
      AOS.init();
   </script>

Apabila anda menjalankan kod di atas dalam penyemak imbas anda, anda sepatutnya melihat div dengan teks "Flip Up!" Muncul dengan animasi flip ke arah atas.

Begitu juga, jika kita ingin melakukan animasi flip-down, kita boleh menggunakan seperti yang ditunjukkan dalam coretan kod di bawah.

<div id="main">
   <div data-aos="flip-down">Flip down!</div>
</div>

Untuk belok kiri, coretan kod ditunjukkan di bawah.

<div id="main">
   <div data-aos="flip-left">Flip left!</div>
</div>

Untuk selak kanan, coretan kod ditunjukkan di bawah.

<div id="main">
   <div data-aos="flip-right">Flip right!</div>
</div>

Skalakan animasi menggunakan AOS.js

Animasi zum menyerupai tingkah laku zum, dan sejumlah 8 animasi berbeza boleh dicapai. Ini ialah -

• Zum masuk
• Zum masuk
• Zum keluar
• Zum kiri
• Zum kanan
• Zum keluar
• Zum masuk
• Zum keluar
• Zum keluar ke kiri
• Zum keluar kanan

Sekarang mari kita gunakannya satu demi satu dalam contoh HTML-CSS yang mudah.

index.html

Mari kita pertimbangkan fail index.html berikut di mana kita akan melakukan animasi "zum masuk".

Contoh

   
   
   
   
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   


   

      
Zoom in!
   
   
   <script>
      AOS.init();
   </script>

Apabila kita menjalankan kod di atas dalam penyemak imbas, kita akan melihat div dengan Zum Teks menghala ke atas dalam animasi zumnya.

Begitu juga, jika kita ingin melakukan animasi zum masuk, kita boleh menggunakan yang ditunjukkan dalam coretan kod di bawah.

<div id="main">
   <div data-aos="zoom-in-up">Zoom in up!</div>
</div>

Untuk zum masuk, coretan kod ditunjukkan di bawah.

<div id="main">
   <div data-aos="zoom-in-down">Zoom in down!</div>
</div>

Untuk Zum Kiri, coretan kod kelihatan seperti di bawah.

<div id="main">
   <div data-aos="zoom-in-left">Zoom in left!</div>
</div>

Untuk zum kanan, coretan kod kelihatan seperti di bawah.

<div id="main">
   <div data-aos="zoom-in-right">Zoom in right!</div>
</div>

同样，如果我们想要缩小动画，我们可以使用下面代码片段中显示的。

<div id="main">
   <div data-aos="zoom-out">Zoom out!</div>
</div>

对于放大，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-up">Zoom out up!</div>
</div>

对于缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-down">Zoom out down!</div>
</div>

对于向左缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-left">Zoom out left!</div>
</div>

对于向右缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-right">Zoom out right!</div>
</div>

使用 AOS.js 进行多重设置动画

在上面的所有示例中，我们使用的是单个动画，没有其他选项，但 AOS.js 也允许我们使用带有动画的选项。例如，考虑这样的情况：我们想要一个淡入淡出动画，但持续时间为某个时间。

在下面的代码片段中，我们将创建一个带有持续时间的淡入淡出动画。

<div id="main">
   <div data-aos="fade-down" data-aos-duration="3000"></div>>Fade Down With Duration!</div>
</div>

结论

在本教程中，我们演示了如何借助 AOS.js、HTML 和 CSS 创建滚动动画。

Atas ialah kandungan terperinci Tambahkan animasi pada skrol menggunakan HTML, CSS dan AOS.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!