Comment créer un effet de machine à écrire avec CSS
Les feuilles de style en cascade (CSS) ont parcouru un long chemin depuis leur création. Il y a des choses qui sont possibles avec CSS que vous ne connaissez peut-être pas, grâce à l’évolution et à l’amélioration continues du langage.
L’une des avancées les plus notables des feuilles de style CSS est l’émergence et le perfectionnement des fonctions CSS, qui ont considérablement élargi les capacités et la puissance du stylisme du contenu web.
Qu’est-ce que l’effet machine à écrire ?
L’effet machine à écrire est une technique d’animation de texte qui simule le processus de dévoilement progressif du contenu, imitant l’acte de dactylographier au fur et à mesure qu’il se déroule sous les yeux de l’internaute. Cet effet rappelle les vieilles machines à écrire, les premiers terminaux informatiques ou les interfaces de ligne de commande (CLI).
L’apparition progressive du texte ajoute un élément de suspense et d’intrigue, encourageant le public à prêter une attention particulière au message qui se déploie.
Fonctionnement de la fonction CSS steps()
Les fonctions CSS introduisent un niveau de flexibilité qu’il était auparavant difficile d’atteindre en utilisant uniquement des styles statiques. La fonction steps() est une fonction populaire utilisée dans les animations CSS. Elle donne l’impression que les animations progressent par étapes distinctes et discrètes au lieu d’une transition en douceur.
steps() est une fonction de synchronisation d’animation qui prend en compte deux paramètres. Le premier paramètre indique le nombre de pas que vous voulez que votre animation prenne. Le second paramètre définit le comportement de chaque étape. La syntaxe de la fonction steps() se présente comme suit :
Dans le bloc de code ci-dessus, la fonction steps() a deux paramètres, à savoir n et sens. Les direction peut être soit début soit fin.
Réglage de la direction à début garantit que la première étape est achevée dès le début de l’animation. En revanche, le réglage de la valeur direction à fin exécutera la dernière étape lorsque l’animation se terminera. Pour illustrer l’importance de l’élément steps() regardez le code HTML suivant :
Le bloc de code ci-dessus définit une fonction conteneur avec une div enfant. Si vous voulez que la div enfant glisse sur l’écran, vous utilisez des animations CSS comme ceci :
Le bloc de code ci-dessus utilise la règle @keyframes pour définir une animation nommée movebox. Cette animation est ensuite appliquée à la div enfant, ce qui lui permet de se déplacer doucement à travers l’écran dans une boucle infinie.
Si vous n’aimez pas les animations fluides et que vous souhaitez obtenir un effet « haché », vous pouvez utiliser la fonction steps() comme suit :
Comme vous pouvez le voir dans le GIF ci-dessous, l’incorporation de la fonction steps() avec une valeur de paramètre de 10 animera la div enfant par étapes au lieu d’une animation fluide. Plus le nombre de pas est élevé, moins l’animation sera hachée.
Dans l’exemple ci-dessus, la fonction direction est fourni. Cependant, si vous omettez le paramètre direction le navigateur utilisera fin comme valeur par défaut pour la direction.
Création de l’effet machine à écrire
Maintenant que vous avez compris comment la direction steps() il est temps de mettre en pratique tout ce que vous avez appris. Créez un nouveau dossier et donnez-lui un nom approprié. Dans ce dossier, ajoutez un fichier index.htm pour le balisage et un fichier style.css pour le style.
Dans le fichier index.htm ajoutez le code boilerplate suivant :
Le bloc de code ci-dessus définit le balisage d’un site web HTML simple. Il y a un fichier conteneur qui contient une autre div avec un texte fictif.
Animer le texte
Ouvrez la div styles.css et définissez la largeur du fichier conteneur à la largeur de son contenu.
Ensuite, en utilisant le conteneur @keyframes définissez une animation qui contrôle la progression de l’animation dans le temps. Définissez la largeur à « 0% » à 0%. A 100%, réglez la largeur sur « 100% » comme suit :
Sélectionnez ensuite l’élément portant le nom de classe texte et définissez l’élément le débordement à caché. Cela permet de s’assurer que le texte reste caché tant que l’effet de frappe n’a pas commencé. Ensuite, assurez-vous que le texte reste sur une seule ligne en définissant la propriété espacement à nowrap. Donner à la propriété texte une police monospace et ajoutez une bordure verticale verte à droite du texte.
Cette bordure donnera l’apparence d’un curseur. Définissez la classe taille de police et la taille de la police et la taille de la police animation à type-text. Enfin, ajoutez la propriété steps() à la fonction animation-timing-function.
Lorsque vous exécutez le code dans le navigateur, voici ce que vous devriez voir :
Si vous souhaitez obtenir un effet de frappe plus long, vous pouvez ajuster la durée de l’animation et le nombre d’étapes spécifiées dans la balise steps() de la fonction .
Donner vie au curseur
L’effet machine à écrire est presque complet, bien qu’il manque un élément, à savoir le curseur clignotant. Rappelez-vous que dans le dernier bloc de code, une bordure vers la droite a été placée sur le texte pour servir de curseur. Vous pouvez ajouter une animation à ce curseur à l’aide de la fonction @keyframes pour ajouter une animation à ce curseur.
Après avoir défini l’animation personnalisée, ajoutez le nom de l’animation au fichier animation de la propriété texte et fixer la durée à 0,6 seconde.
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 manière dont les sites web sont construits, offrant une remarquable boîte à outils au développeur que vous êtes. Ces fonctions polyvalentes permettent un style dynamique et des interactions qui étaient autrefois réservées à des langages de script complexes.
Des manipulations de couleurs aux mises en page réactives, en passant par les animations et les transformations créatives, les fonctions CSS ont élargi les possibilités de conception des sites web. Avec des fonctions telles que calc() pour des calculs flexibles, linear-gradient() pour de superbes arrière-plans et translate() pour des animations captivantes, vous pouvez créer des expériences utilisateur visuellement attrayantes et engageantes.
