Ajoutez une animation lors du défilement en utilisant HTML, CSS et AOS.js

AOS.js (Scroll Animations) est une bibliothèque JavaScript qui fournit des animations, facilitant l'ajout d'un grand nombre d'animations simplement en changeant le nom de la classe dans la balise div requise. Bien qu'il existe différentes bibliothèques JavaScript d'animation, AOS.js est probablement la plus simple de toutes.

Dans ce tutoriel, nous explorerons les différents types d'animations que vous pouvez utiliser dans AOS.js à l'aide de différents exemples.

Le premier type d’animation que nous explorerons est l’animation de fondu. Avant de faire cela, nous devons d'abord nous assurer que aos.css et aos.js sont disponibles dans notre code et que nous pouvons les obtenir via un lien CDN.

Tout ce que vous avez à faire est de coller l'extrait de code suivant à la fin de la balise

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

L'extrait de code ci-dessus aidera à obtenir le fichier css, afin d'obtenir le fichier js, nous devons coller la balise body dans le code HTML de l'extrait CDN comme indiqué ci-dessous à la fin.

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

Après avoir ajouté les deux extraits de code ci-dessus dans le code HTML, nous pouvons utiliser AOS dans le code.

Utilisez l'animation de fondu AOS.js

L'animation de fondu simule le comportement de fondu d'entrée et de sortie, et un total de 8 animations différentes peuvent être réalisées. Ce sont -

• Fondu entrant et sortant

• Fondu entrant et sortant

• Fondu à gauche

• Fondu à droite

• Fondu à gauche

• Fondu à droite

• Fondu à gauche

• Fondu à gauche

Utilisons-les maintenant un par un dans un exemple simple HTML-CSS.

L'extrait de code ci-dessous est la seule partie dans laquelle nous apporterons des modifications à toutes les animations de fondu ci-dessus.

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

Dans le code ci-dessus, nous transmettons la valeur "fade-up" à l'attribut data-aos, et dans tous les cas de fondu, seule cette valeur sera modifiée.

index.html

Maintenant, considérons le fichier index.html suivant dans lequel nous allons réaliser l'animation « fondu sortant » .

Exemple

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



   

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

Lorsque vous exécutez le code ci-dessus dans votre navigateur, vous devriez voir un div contenant le texte "Something Up!" apparaissant vers le haut avec une animation de fondu.

De même, si nous voulons effectuer une animation fade, nous pouvons utiliser celle présentée dans l'extrait de code ci-dessous.

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

Il suffit de remplacer le div dans le fichier index.html par le div ci-dessus pour obtenir l'animation de fondu.

Pour fondu à gauche, l'extrait de code ressemble à ci-dessous.

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

Pour fade, l'extrait de code ressemble à ci-dessous.

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

Pour Fade-up-left, l'extrait de code est présenté ci-dessous.

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

Pour Fade-up-right, l'extrait de code est présenté ci-dessous.

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

Pour Fade Left, l'extrait de code ressemble à ci-dessous.

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

Pour Fade-down-right, l'extrait de code est présenté ci-dessous.

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

À ce stade, nous pouvons conclure que l'animation de fondu dans AOS est terminée.

Utilisez l'animation flip AOS.js

L'animation Flip simule le comportement de retournement et un total de 4 animations différentes peuvent être réalisées. Ce sont -

• Faites défiler vers le haut

• Faites défiler vers le bas

• Retourner à gauche

• Tournez à droite

Utilisons-les maintenant un par un dans un exemple simple HTML-CSS.

index.html

Considérons le fichier index.html suivant dans lequel nous réaliserons l'animation "flip up".

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



   

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

Lorsque vous exécutez le code ci-dessus dans votre navigateur, vous devriez voir un div avec le texte "Flip Up!" Apparaît avec une animation de retournement vers le haut.

De même, si nous voulons faire une animation rabattable, nous pouvons utiliser comme indiqué dans l'extrait de code ci-dessous.

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

Pour tourner à gauche, l'extrait de code est présenté ci-dessous.

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

Pour right flip, l'extrait de code ressemble à ci-dessous.

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

Animation à l'échelle à l'aide d'AOS.js

L'animation Zoom simule le comportement du zoom et un total de 8 animations différentes peuvent être réalisées. Ce sont -

• Zoom avant
• Zoom avant
• Zoom arrière
• Zoom à gauche
• Zoom à droite
• Zoom arrière
• Zoom avant
• Zoom arrière
• Zoom arrière vers la gauche
• Zoom arrière à droite

Utilisons-les maintenant un par un dans un exemple HTML-CSS simple.

index.html

Considérons le fichier index.html suivant dans lequel nous allons effectuer une animation "zoom avant".

Exemple

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



   

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

Lorsque nous exécutons le code ci-dessus dans le navigateur, nous devrions voir un div avec le zoom du texte pointant vers le haut dans son animation de zoom.

De même, si nous souhaitons effectuer une animation de zoom avant, nous pouvons utiliser celle présentée dans l'extrait de code ci-dessous.

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

Pour le zoom avant, l'extrait de code est présenté ci-dessous.

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

Pour Zoom Left, l'extrait de code ressemble à ci-dessous.

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

Pour zoom à droite, l'extrait de code ressemble à ci-dessous.

<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 创建滚动动画。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!