Vous avez toujours voulu impressionner vous visiteurs lorsque ceux-ci visitent votre site web en optant pour un design original ?

Eh bien pourquoi pas commencer par animer les façons dont vos typographies apparaissent ?

Dans ce tutoriel, nous allons coder avec vous cette animation de révélation de texte avec seulement du HTML et du CSS.

Matériels/Outils :

• Un fichier HTML ;
• Un fichier CSS ;
• Une image qui fera office de background. Nous avons choisi cette image verte que nous avons récupérée sur le site de Volkeno.

C’est tout ce dont on aura besoin pour réaliser ce petit exercice. Allez, c’est parti !

Nous allons d’abord devoir créer un fichier index.html dans lequel on va mettre notre code HTML.

On a créé un conteneur avec deux paragraphes et des balises très important qui entourent les textes des paragraphes.

Les balises servent à avoir l’animation juste sur la largeur des textes.

C’est tout pour le HTML et maintenant, il est tant de styliser notre page HTML.

Le reste du travail se fera dans notre fichier style.css.

Pour commencer, on a fait un reset de notre page, fixer la hauteur à 100 et insérer l’image background qui prend toute la largeur de la page et reste centré lorsqu’on réduit la taille de l’écran.

Ensuite, nous allons centrer notre conteneur et formater nos paragraphes avec un font-weight de 900.

Nous avons fait exprès de commenter les propriétés color et font-size pour mieux se situer dans notre travail, mais rappelez-vous qu’à la fin, on doit les décommenter.

En vue de créer notre animation, nous allons à présent travailler sur nos span qu’on va plutôt mettre en inline-block, position relative, overflow hidden pour que l’effet se voie seulement sur la largeur des span et le font-size qui a une valeur clamp(20px , 8vw, 120px).

La fonction clamp() limite une valeur qui sera comprise entre deux valeurs extrêmes.

Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester (préférée) et une valeur maximale.

Du coup, on est sûr que notre texte sera responsive.

Ensuite, on applique le pseudo élément after à nos span avec la position absolute, display block en vue de leur mettre la largeur et hauteur à 100 % et le transform translate à -100 % pour nous assurer que l’animation va commencer tout au début du bloc.

Le premier texte dans le paragraphe aura un font-weight de 200 et on a appelé une animation txt-apparence qu’on va créer tout à l’heure.

Cette animation aura une durée de 0 seconde avec un délai de 1 seconde (nous allons devoir attendre que les blocs passent devant et une fois qu’elles seront parties, on fait apparaître le texte) et le forwards qui va garder les valeurs finales.

On fait la même chose pour le deuxième paragraphe sauf que, lui, il garde son font weight de 900 et va avoir 1.25 second de délai afin de créer un décalage entre les deux animations.

Ensuite, on applique aussi des animations à nos pseudo éléments auxquels, nous avons donné des backgrounds différents. Des animations slide-in et slide-out qui ont les mêmes durées, mais des délais différents pour un effet plus sympa.

Remarque : le deuxième partira partir 0.3 s après le premier

Maintenant, nous allons créer les @keyframes pour configurer nos animations : txt-apparence, slide-in et slide-out.

Assez simple n’est-ce pas ! Avec slide-in, les textes vont aller de -100 % à 0 % ensuite, vont partir à 100 % avec slide-out. Donc de -100, on passe à 0 puis 100 % et c’est tout.

Il ne faut surtout pas oublier de décommenter les propriétés color : transparent et font-size : 0 px des balises p.

Voilà, nous vous avons donné toutes les étapes et les clés pour réussir votre animation de texte et avoir des effets <> sur votre site web.

Cependant, pour un travail plus propre et de qualité, nous vous recommandons donc d’avoir recours à un professionnel du développement ou du webdesign comme nous. Contactez-nous.

Retrouvez toutes les lignes de code en cliquant sur ce lien : Code