Créer un texte animé
Ayfoth vous propose de réaliser la création suivante :
Sommaire
Bonjour,
dans ce tuto nous allons voir comment créer une animation sur un texte à l'aide du CSS et du Javascript.
Préparatif
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.
Contenu HTML
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.
Code JS
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.
Base CSS
Dans cette première étape CSS nous allons juste gérer le body en lui attribuant un background et une couleur de texte.
CSS et la class opening
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.
CSS et les délais des animations
Ici , toujours dans le css nous allons attribuer des délais pour notre animation pour que l'animation se fasse progressivement.
CSS et la définition de nos animations
Et pour finir, toujours dans notre CSS, nous définissons nos animations en leur attribuant des valeurs d'opacité.
Et voilà vous savez comment faire une animation basique sur vos textes, cependant attention, sur certains sites le javascript n'est pas autorisé, vous devez alors utiliser un iframe.
Si vous êtes perdu, voici le code complet.
HTML
CSS
JS
Rendus
Personne n'a encore essayé ce tutoriel. Soyez le premier !
Commentaires
Ce tutoriel n'a pas reçu de réponses pour le moment. Soyez le premier à le commenter !
Répondre
Vous devez être inscrit et connecté pour pouvoir poster un commentaire.