Comment créer un effet d'animation fondu avec JavaScript et CSS

Les animations, les transitions et les effets 3D ne sont rien de moins qu'un capteur oculaire. Chaque fois que vous créez votre site Web ou un projet, vous ne voulez pas qu'il se perde dans le groupe de millions de sites Web disponibles sur Internet. Vous voulez qu'il se démarque, vous voulez qu'il amuse ses utilisateurs et soit stocké dans leur subconscient. Pour rendre vos pages Web plus intrigantes, vous devez utiliser diverses animations et effets de transition des pages.

L'un des effets d'animation populaires et extrêmement intéressants est le Décoloration et Disparaître Animation, qui peut être implémentée à l'aide de JavaScript et HTML \ CSS.

Étape 1: Configurez la page de base

Créez un nouveau HTML sur votre éditeur de code préféré, créez un script.Fichier JS et un style.Fichier CSS également comme indiqué:

À l'intérieur du fichier HTML, liez le fichier CSS et le script.Fichier JS en utilisant les lignes suivantes avant la balise corporelle:

Maintenant, nous allons mettre en œuvre une animation de décoloration sur une image, et pour l'image, nous allons utiliser une image libre de droits de UNSPLASH. Vous pouvez créer une balise d'image et un bouton que nous utiliserons pour s'estomper et décolorer l'image avec les lignes suivantes:

id = "image" src = "https: // images.désactiver.com / Photo-1640273837947-EA830D50C191?ixlib = rb-1.2.1 & ixid = mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8 & auto = format & fit = crop & w = 2072 & q = 80 "
alt = ""
/>


Effet de fondu

Remarquez que nous avons donné l'ID "Image" à l'image et à l'ID de "Mybutton" au bouton que nous créons.

Étant donné que l'image est assez grande, nous allons définir une hauteur et une largeur particulières dans le fichier CSS en utilisant les lignes suivantes:

#image
hauteur: 200px;
Largeur: 200px;

Votre page devrait ressembler à ceci:

Nous avons notre image au centre de l'écran et à droite sous l'image, nous avons notre bouton.

Étape 2: Modification du fichier CSS

Il existe de nombreuses façons d'implémenter une animation particulière à l'aide de CSS et JavaScript, mais pour ce post particulier, nous allons jouer avec les classes et l'attribut d'opacité du CSS. Modifiez votre fichier CSS avec les lignes suivantes:

#image
Opacité: 1;
transition: opacité 0.3s facilité de sortie;
hauteur: 200px;
Largeur: 200px;

#image.disparaître
Opacité: 0;

Pour expliquer ce que nous faisons dans les lignes ci-dessus: nous mettons simplement l'opacité de l'image à 100% au début et si l'image a une classe active "disparaître" alors l'opacité changera en 0%. Mais, ce changement d'opacité se produira dans un cas, pour créer un effet d'animation, nous utilisons l'attribut de transition et le définissons sur 0.3s.

Maintenant, tout ce que nous devons faire est d'écrire un script qui basculera la classe "Disparaître" de l'image

Étape 3: basculer la classe avec JavaScript

Dans le script.Fichier JS, nous allons d'abord récupérer l'élément d'image et le stocker à l'intérieur d'une variable, puis nous allons basculer la classe, mais tout cela devrait être fait sur le bouton Appuyez sur le bouton. Ainsi, ajoutez les lignes suivantes dans le fichier de script:

Laissez l'image = document.getElementById ("image");
document.GetElementByid ("Mybutton").onClick = function ()
image.liste de classe.basculer («fondu»);
;

Ainsi, avec cela, nous devrions être en mesure de mettre en œuvre l'animation et la transition de la décoloration.

Étape 4: Tester notre animation

La dernière étape consiste à exécuter le fichier HTML sur notre machine locale et à tester l'animation sur le bouton Appuyer, vous devriez voir la sortie suivante:

Comme vous pouvez le voir dans le gif ci-dessus que notre animation fonctionne parfaitement.

Conclusion

Les animations peuvent facilement être implémentées avec l'utilisation de JavaScript avec HTML et CSS pour rendre les pages Web beaucoup plus attrayantes et accrocheuses. Dans cet article, nous avons appris à faire une animation de décoloration et de décoloration sur un élément HTML en affectant différentes.