Créer un texte animé

Pour commencer, on créer un document HTML classique avec l'appel de notre CSS et notre futur code Javascript qui portera le nom de code.js.

Ensuite on met notre contenu HTML, ici on a mit notre texte dans une h2 mais ça marche avec n'importe quelle balise. On notera également la présence d'une classe dans notre balise.

Nous créons donc notre fichier js que nous appelons comme nous les voulons , ici code.js si vous mettez un autre nom , oubliez pas de le changer dans votre HTML. Quelques explications sur ce code. Ce code recherche tous les éléments textuels présent dans la classe opening est les met dans un span. Donc si vous changer la classe opening changez le aussi dans le code. Vous pouvez également mettre ce code entre des balises scripts.

Dans cette première étape CSS nous allons juste gérer le body en lui attribuant un background et une couleur de texte.

Ici nous allons traiter notre classe opening qui est à la base de notre animation. On va lui attribuer une position, une opacité nulle, une animation et une marge.

Ici , toujours dans le css nous allons attribuer des délais pour notre animation pour que l'animation se fasse progressivement.

Et pour finir, toujours dans notre CSS, nous définissons nos animations en leur attribuant des valeurs d'opacité.