Comment créer un effet de machine à écrire avec CSS
Les feuilles de style en cascade (CSS) ont beaucoup évolué depuis leur création. Grâce à l'amélioration constante de ce langage, il est maintenant possible de réaliser des effets uniquement avec CSS que vous ignorez peut-être.
Une avancée notable du CSS est l'apparition et le perfectionnement des fonctions CSS. Celles-ci ont considérablement étendu la puissance et les possibilités de stylisation du contenu Web.
Qu'est-ce que l'effet machine à écrire ?
L'effet machine à écrire est une technique d'animation de texte simulant la divulgation progressive du contenu. Cet effet imite l'action de taper sur un clavier devant les yeux du spectateur. Il rappelle les anciennes machines à écrire, les premiers terminaux informatiques ou les interfaces de ligne de commande.
L'apparition graduelle du texte suscite un certain suspense et de l'intrigue, incitant le public à être plus attentif au message qui se révèle.
Comment fonctionne la fonction CSS steps()
Les fonctions CSS offrent une flexibilité qui était difficile à atteindre en utilisant uniquement des styles statiques. La fonction steps(), souvent utilisée dans les animations CSS, donne l'impression que les animations progressent par étapes distinctes au lieu d'une transition continue.
La fonction steps() est une fonction de temporisation d'animation qui prend deux paramètres. Le premier indique le nombre d'étapes que l'animation doit suivre. Le second définit le comportement de chaque étape. Voici la syntaxe de steps() :
animation-timing-function: steps(n, direction)
Dans le code ci-dessus, steps() a deux paramètres : n et direction. La direction peut être start ou end.
Définir la direction sur start assure que la première étape est exécutée dès le début de l'animation. En revanche, end exécutera la dernière étape à la fin de l'animation. Pour illustrer l'importance de steps(), regardez le code HTML suivant :
<div class="container">
<div></div>
</div>
Ce code définit un élément conteneur div avec un élément enfant div. Si vous souhaitez que l'élément enfant glisse sur l'écran, vous pouvez utiliser des animations CSS comme ceci :
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Le code ci-dessus utilise @keyframes pour définir une animation appelée movebox. Cette animation est appliquée à l'élément enfant div, le faisant bouger en douceur sur l'écran en boucle infinie.
Si vous préférez un effet saccadé, vous pouvez utiliser steps() comme ceci :
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Comme on le voit dans l'exemple ci-dessous (GIF), l'utilisation de steps() avec une valeur de 10 anime l'élément enfant div par étapes au lieu d'une animation continue. Plus le nombre d'étapes est élevé, moins l'animation sera saccadée.
Dans l'exemple ci-dessus, le paramètre de direction est spécifié. Si vous l'omettez, le navigateur utilisera end par défaut.
Créer l'effet machine à écrire
Maintenant que vous comprenez comment fonctionne steps(), il est temps de mettre vos connaissances en pratique. Créez un nouveau dossier avec un nom approprié. Dans ce dossier, ajoutez un fichier index.htm pour le balisage et un fichier style.css pour le style.
Dans index.htm, ajoutez le code suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-typewriter-effect-with-css/style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
Ce code définit le balisage d'un simple site Web HTML. Il contient un élément conteneur div qui contient lui-même un div avec du texte fictif.
Animer le texte
Ouvrez styles.css et définissez la largeur de l'élément conteneur div sur la largeur de son contenu :
.container{
width: fit-content;
}
Ensuite, avec @keyframes, définissez une animation qui contrôle la progression de l'animation dans le temps. Définissez la largeur sur 0% à 0% et sur 100% à 100% comme ceci :
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Ensuite, sélectionnez l'élément avec le texte ayant la classe text et définissez la propriété overflow sur hidden. Cela garantit que le texte reste masqué tant que l'effet de frappe n'a pas démarré. Ensuite, assurez-vous que le texte reste sur une seule ligne en définissant la propriété whitespace sur nowrap. Donnez à la classe text une police à espacement fixe et ajoutez une bordure verticale verte à droite du texte.
Cette bordure servira de curseur. Définissez la taille de la police appropriée et définissez la propriété animation sur type-text. Enfin, ajoutez la fonction steps() à la propriété animation-timing-function.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
Lorsque vous exécutez le code dans le navigateur, vous devriez voir ceci :
Si vous voulez un effet de frappe plus long, ajustez la durée de l'animation et le nombre d'étapes spécifié dans steps().
Donner vie au curseur
L'effet machine à écrire est presque terminé, mais il lui manque une caractéristique : le curseur clignotant. Rappelez-vous que dans le dernier bloc de code, une bordure vers la droite a été définie sur le texte pour servir de curseur. Vous pouvez ajouter une animation à ce curseur en utilisant @keyframes.
@keyframes cursor-blink {
0% {
border-color: transparent;
} 100% {
border-color: green;
}
}
Après avoir défini l'animation personnalisée, ajoutez le nom de l'animation à la propriété animation sur la classe text et définissez la durée sur 0,6 seconde.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Maintenant, lorsque vous exécutez le code, vous devriez voir un curseur clignotant.
La puissance des fonctions CSS
Les fonctions CSS ont révolutionné la construction des sites Web, vous offrant des outils puissants en tant que développeur. Ces fonctions permettent des styles et des interactions dynamiques qui étaient auparavant réservés aux langages de script complexes.
Des manipulations de couleurs aux mises en page réactives, en passant par les animations et transformations créatives, les fonctions CSS ont élargi les possibilités de la conception Web. Avec des fonctions telles que calc() pour les calculs flexibles, linear-gradient() pour les arrière-plans époustouflants et translate() pour les animations captivantes, vous pouvez créer des expériences utilisateur visuellement attrayantes et engageantes.