Effet d'animation entrant sur un texte en CSS

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Effet d'animation entrant

Dans ce premier volet sur les astuces et effets CSS, nous allons apprendre très simplement à créer une animation sur un texte d'accueil. Et comme vous le verrez, aucun code Javascript ne sera nécessaire.



Introduction
Les CSS sont des feuilles de style en cascade : Cascading Style Sheets. On les exploite pour définir les attributs des éléments Html qui composent les pages d'un site Web. Conventionnellement, on les lie et on les déclare dans l'entête de la page, la section head. Ils sont ainsi externalisés pour être exploités par toutes les pages du site. C'est une excellente manière de normaliser les réglages de mise en forme et de mise en page. Mais c'est aussi une excellente façon d'optimiser les travaux de retouche. La moindre modification sur l'un des styles est ainsi automatiquement répercutée sur toutes les pages qui l'utilisent.

La vocation de cette série d'astuces n'est pas d'apprendre le CSS en partant du B.A-BA. Avec les innombrables sources en libre-service sur le Web, il suffit de se servir pour s'inspirer et répliquer les réglages souhaités. Dans cette série, nous proposons de découvrir des astuces et des effets intéressants qu'il est possible d'appliquer pour agrémenter les pages d'un site.

Dans ce premier volet et très simplement, nous allons voir comment créer un effet d'animation entrant sur un texte.

Fichiers sources
Pour la construction de ce premier effet basique, nous proposons de récupérer des sources. Elles offrent une page Web structurée, mise en forme et mise en page par certains styles CSS. Mais bien entendu, ceux concernant l'animation sont à construire.

• Télécharger le fichier compressé animation-css-texte-entrant.rar en cliquant sur ce lien,
• Le décompresser dans le dossier de votre choix,

Comme vous pouvez le voir, la décompression conduit à trois fichiers accompagnés de trois sous dossiers. Les trois fichiers sont nommés respectivement : index.htm, animation.txt et keyframes.txt. Index.htm est la page Html à partir de laquelle nous allons travailler, entre autres. Elle offre la structure, organisée par les styles. Et précisément ces styles sont déclarés et paramétrés dans le sous dossier css. Les deux autres sous dossiers n'offrent pas grand intérêt pour l'instant. Mais cette structuration est celle que nous retrouverons au fil de nos péripéties sur la découverte des effets et astuces avec les styles CSS. Les deux fichiers de texte (.txt) à la racine, fournissent quant à eux les fragments de code CSS permettant de donner vie à l'animation souhaitée. Vous l'avez compris, dans ce premier volet, il n'est pas question de coder mais simplement de restituer par copier-coller.

Découverte de la structure Html
Avant de débuter, il est important de comprendre comment les éléments Html sont articulés et comment ils sont organisés par les styles.

• A la racine du dossier de décompression, double cliquer sur le fichier index.htm,

Il s'ouvre ainsi dans votre navigateur Web défini par défaut.



Nous débouchons sur une page Web d'accueil avec une structure et une mise en forme qui valent ce qu'elles valent. Seule la technique nous intéresse ici. En haut du rectangle aux coins arrondis, le texte d'accueil est bien présent (Bonjour et bienvenue). Mais à ce stade, il semble très introverti. Côté mise en forme, il est en retrait par rapport à tous les autres éléments de la page. De plus, aucun effet d'animation ne lui est affecté. Il s'agit bien sûr de tout l'enjeu de cette première astuce.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Si vous ne le possédez pas, sachez que ce logiciel est gratuit. Il suffit de taper son nom dans un moteur de recherche comme Google pour l'obtenir facilement.

Tout d'abord, en entête du code Html, vous notez la présence des déclaratives aux feuilles de styles CSS :

<link rel='stylesheet' href='css/mes-styles.css'>
<link rel='stylesheet' href='css/les-styles.css'>

La feuille CSS mes-styles.css définit tous les attributs de mise en forme pour les éléments Html de la page Web. Comme nous l'avons évoqué, nous ne nous attarderons pas à son sujet. La feuille les-styles.css est celle qui nous intéresse. C'est elle qui doit accueillir les paramétrages donnant vie à l'effet d'animation sur le texte de bienvenue.

La suite du code située dans le Body est la construction de la page. La partie qui nous intéresse est située dans le Div d'identifiant conteneur (<div id='conteneur'>). Un Div Html est un calque. Il délimite une zone dans laquelle des informations sont contenues. Sa borne inférieure est sanctionnée par son élément fermant : </div>. A l'intérieur de ce calque, un autre calque est imbriqué. Il encapsule le titre à animer : <divclass='message'>Bonjour et bienvenue</div> .

Vous notez la présence de son attribut class. Il est primordial. Il fait référence au style message. C'est lui que nous devons paramétrer dans la feuille de styles les-styles.css pour générer l'effet d'animation.

Animation CSS
Comme nous l'évoquions précédemment, dans ce premier volet et pour une progression linéaire, nous allons nous contenter de restituer des styles déjà construits. Mais, nous allons prendre soin d'expliciter le code et d'en constater les effets.

• A la racine du dossier de décompression, double cliquer sur le dossier css pour l'ouvrir,
• Dès lors, cliquer droit sur le fichier les-styles.css,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Un style Css existe déjà. Il est préfixé du symbole du dièse (#) car il est fait référence à un élément unique dans la page Web reconnu par son attribut id. Il s'agit du div d'identifiant desc encapsulant le texte d'introduction situé sous le texte du titre d'accueil à animer. En revanche, lorsque plusieurs éléments Html héritent d'un même style, celui-ci doit être préfixé du symbole du point (.) à la place du symbole du dièse. Dès lors, dans la balise Html de chacun de ces éléments, c'est l'attribut class qui permet d'y faire référence à la place de l'attribut id.

• A la racine du dossier de décompression, double cliquer sur le fichier keyframes.txt,

Ainsi nous l'ouvrons dans le bloc notes.

• Réaliser le raccourci clavier CTRL + A pour sélectionner tout le code,
• Le copier par le raccourci clavier CTRL + C,
• Revenir dans l'éditeur Notepad++ sur le fichier les-styles.css,
• Cliquer après l'accolade fermante du style Css desc,
• Enfoncer la touche Entrée du clavier pour repousser le pont d'insertion en-dessous,
• Coller le code précédemment prélevé par le raccourci clavier CTRL + V,
• Puis, enregistrer les modifications (CTRL + S),

@keyframes mon_anim{
0%{
transform: translateY(10vh);
opacity: 0;
},
100%{
transform: translateY(0px);
opacity: 1;
}}

Un keyframes est une règle CSS. Dans une feuille de styles, il est nécessairement préfixé du symbole de l'arobase et suivi du nom de la règle, en l'occurrence ici du nom de l'animation : mon_anim. Cette animation n'existe pas encore, chaque chose en son temps. Le Keyframes permet de définir les étapes qui composent la séquence d'une animation CSS. Et comme vous pouvez le voir, chaque séquence est délimitée par des accolades.

Le point de départ commence à 0%. L'attribut transform paramètre le type d'animation à initier. Avec la fonction translateY, nous initialisons une animation verticale. Le point de départ est défini à 10vh. Vh est une unité de mesure relative aux dimensions de la page. Sans entrer dans les détails, le texte concerné doit débuter son animation en dessous de sa position d'origine. L'attribut opacity est réglé à 0. En d'autres termes, le texte concerné est transparent au début de l'animation.

Cette animation est complétée à 100%. Et naturellement, il s'agit de définir l'état d'arrivée des deux attributs paramétrés au début de l'effet. Dans l'attribut transform, nous passons cette fois la valeur 0px à la fonction translateY. De cette façon, l'élément Html concerné doit retrouver sa position d'origine telle qu'elle est définie dans la structure Html de la plage Web. Puis, nous réglons l'attribut opacity à 1, soit 100%. L'élément Html, complètement transparent au début de l'animation, doit recouvrer son opacité totale à l'issue de l'effet, en même temps que sa position d'origine.

Mais pour qu'elle soit totalement fonctionnelle, cette animation requiert encore certains paramètres comme sa durée, son délai ou encore son effet de progression. Et ces paramètres se définissent dans le style associé à l'élément Html concerné. D'ailleurs et à ce stade, si vous rafraîchissez la page Web dans la navigateur (F5), aucun changement n'est à observer. Souvenez-vous, dans la page Html, le calque du texte d'accueil est associé au style message : class='message'. C'est lui qui va permettre d'associer la règle (Keyframes) à l'animation de l'élément.

• A la racine du dossier de décompression, double cliquer sur le fichier animation.txt,
• Prélever l'intégralité du style par le raccourci clavier CTRL + A,
• Le copier par le raccourci clavier CTRL + C,
• Revenir sur le fichier les-styles.css dans l'éditeur Notepad++,
• Cliquer après la dernière accolade fermante du keyframes,
• Enfoncer la touche Entrée du clavier pour passer sur la ligne du dessous,
• Puis, coller le style (CTRL + V) précédemment prélevé,

.message
{

animation-name: mon_anim;
animation-duration: 3000ms;
animation-delay: 500ms;
animation-timing-function: ease-in-out;

animation-iteration-count: 1

}

Nous déclarons donc le style message. Et comme nous l'avons expliqué, il est bien précédé du symbole du point (.). Il est en effet appelé par l'attribut class dans la balise div du texte d'accueil, depuis la page Html. D'autres éléments Html peuvent donc l'utiliser pour subir le même effet d'animation. Et à ce titre, le premier attribut indique le nom de l'animation à jouer : animation-name:mon_anim. Le lien est désormais établi avec le keyframes. Mais à ce stade, même si nous connaissons l'état de départ et l'état de fin, il nous reste à définir les étapes de l'animation. C'est la raison de la présence des attributs qui suivent. Nous définissons la durée sur 3000 millisecondes : animation-duration:3000ms, soit une animation qui se joue sur 3 secondes. Nous définissons le délai sur 500 millisecondes : animation-delay: 500ms. De cette manière, au premier chargement de la page, l'animation du texte attend une demi-seconde avant de se déclencher. Nous définissons le style sur ease-in-out : animation-timing-function:ease-in-out. Nous aurons l'occasion de découvrir les différentes valeurs qu'il est possible de passer à l'attribut animation-timing-function. Avec celle-ci, l'animation n'est pas linéaire. Elle débute lentement, progresse régulièrement et ralentit pour rejoindre le point final (Position et opacité). Enfin, l'attribut animation-iteration-count réglé à 1 indique que l'animation ne doit être jouée qu'une fois. Vous pourrez modifier ce paramètre pour constater l'incidence.

• Enregistrer les modifications (CTRL + S),
• Basculer sur le navigateur Web dans lequel la page Html est ouverte,
• Rafraîchir cette dernière à l'aide de la touche F5 du clavier,

Comme vous pouvez le voir, l'animation se joue en respectant les attributs que nous avons définis et expliqués. Le texte d'accueil part d'une position basse et devient de moins en moins transparent jusqu'à rejoindre sa position verticale d'origine.



Tout cela est bien déroulé sur trois secondes en respectant un délai de déclenchement d'une demi-seconde. Cependant, le texte en question manque de charisme. Ses attributs sont tellement neutres qu'il passerait presque inaperçu par rapport aux autres éléments de la page. Nous devons le mettre en valeur. C'est bien la vocation des styles Css. Nous devons donc enrichir le style message qui ne se contentera plus de définir uniquement les réglages de l'animation.

• Revenir sur le fichier les-styles.css dans l'éditeur Notepad++,
• Au début du style message, ajouter les trois attributs suivants (Ceux en gras) :

.message
{

font-size:26px;
margin-top:20px;
color:#2b579a;
animation-name: mon_anim;
animation-duration: 3000ms;
animation-delay: 500ms;
animation-timing-function: ease-in-out;

animation-iteration-count: 1

}

Nous ajoutons donc un réglage sur la taille de la police à 26 pixels (font-size:26px), sur la marge supérieure de 20 pixels à respecter (margin-top:20px) et sur la couleur du texte codée en hexadécimale (color:#2b579a). Il s'agit d'un bleu assez foncé.

• Enregistrer les modifications (CTRL + S),
• Revenir sur le navigateur Web et rafraîchir la page Html (F5),

Cette fois et du fait de ces attributs de mise en forme additionnés, l'animation est plus franche.



Si vous modifiez la valeur de l'attribut animation-duration, l'animation se joue plus ou moins vite. Si vous réglez la valeur de l'attribut animation-iteration-count à 2 et que vous rafraîchissez la page Html, vous constatez que l'animation se joue deux fois en effet.

Voilà donc pour cette légère introduction sur les astuces et effets CSS. Nous avons tant à découvrir et les volets qui suivent regorgent de surprises.