L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Comment créer un effet de machine à écrire CSS pour votre site Web
Dans cet article, vous apprendrez à rendre le texte de votre site Web dynamique et plus attrayant en utilisant des effets de machine à écrire en CSS pur.
L’effet machine à écrire implique que le texte se révèle progressivement, comme s’il était tapé sous vos yeux.
L’ajout d’effets de machine à écrire à des morceaux de votre texte peut aider à engager les visiteurs de votre site Web et à les inciter à lire davantage. L’effet machine à écrire peut être utilisé à de nombreuses fins, telles que la création de pages de destination attrayantes, d’éléments d’incitation à l’action, de sites Web personnels et de démonstrations de code.
L’effet machine à écrire est facile à créer
L’effet de machine à écrire est facile à réaliser et tout ce dont vous aurez besoin pour donner un sens à ce didacticiel est une connaissance de base des animations CSS et CSS.
Voici comment l’effet machine à écrire va fonctionner :
- L’animation de la machine à écrire va révéler notre élément de texte en changeant sa largeur de 0 à 100%, étape par étape, à l’aide du CSS
steps()une fonction. - Une animation clignotante va animer le curseur qui « tape » le texte.
Création de la page Web pour notre effet de frappe
Commençons par créer la page Web de notre démo de machine à écrire. Il comprendra un <div> conteneur pour notre texte de machine à écrire avec une classe de typed-out:
<!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html>
Styliser le conteneur pour le texte de la machine à écrire
Maintenant que nous avons la mise en page de la page Web, stylisons le <div> avec la classe « typé » :
.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}
Notez que, pour que l’effet machine à écrire fonctionne, nous avons ajouté ce qui suit :
"overflow: hidden;"et un"width: 0;"pour vous assurer que le contenu du texte n’est pas révélé tant que l’effet de frappe n’a pas commencé."border-right: .15em solid orange;"pour créer le curseur de machine à écrire.
Avant de faire l’effet de frappe, afin d’arrêter le curseur à la dernière lettre du typed-out élément une fois qu’il a été entièrement tapé, comme le ferait une machine à écrire (ou vraiment un traitement de texte), nous allons créer un conteneur pour l’élément typed-out élément et ajouter display: inline-block;:
.container {
display: inline-block;
}
Réalisation de l’animation de révélation de texte
L’animation de la machine à écrire va créer l’effet du texte à l’intérieur du typed-out élément en cours de saisie, lettre par lettre. Nous utiliserons le @keyframes Règle d’animation CSS :
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
Comme vous pouvez le voir, cette animation ne fait que changer la largeur d’un élément de 0 à 100 %.
Maintenant, nous allons inclure cette animation dans notre typed-out classe et définissez sa direction d’animation sur forwards pour vous assurer que l’élément de texte ne reviendra pas à width: 0 une fois l’animation terminée :
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation: typing 1s forwards;
}
Notre élément de texte sera simplement révélé en une seule étape fluide, de gauche à droite :
Voir le stylo
Pas en douceur par SitePoint (@SitePoint)
sur CodePen.
Ajout d’étapes pour obtenir un effet de machine à écrire
Jusqu’à présent, notre texte est révélé, mais d’une manière fluide qui ne révèle pas le texte lettre par lettre. C’est un début, mais ce n’est évidemment pas à quoi ressemble un effet de machine à écrire.
Pour que cette animation révèle notre élément de texte lettre par lettre, ou par étapescomme le ferait une machine à écrire, nous devons diviser le typing animation incluse par le typed-out classer en étapes pour qu’il ait l’air d’avoir été tapé. C’est là que le steps() La fonction CSS est disponible :
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation:
typing 1s steps(20, end) forwards;
}
Comme vous pouvez le voir, nous avons divisé le typing animation en 20 étapes en utilisant le CSS steps() une fonction. Voici ce que nous voyons maintenant :
Voir le stylo
Plusieurs étapes par SitePoint (@SitePoint)
sur CodePen.
Voici notre code complet jusqu’à présent :
<html>
<head>
<title>Typewriter effect</title>
</head>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
.container{
display: inline-block;
}
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
animation:
typing 1s steps(20, end) forwards;
font-size: 1.6rem;
width: 0;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
</style>
<body>
<h1>I'm Matt, I'm a</h1>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html>
Réglage des étapes pour un effet de frappe plus long
Pour ajuster les morceaux de texte plus longs, vous devrez augmenter les étapes et la durée de l’animation de saisie :
Voir le stylo
Effet machine à écrire longue par SitePoint (@SitePoint)
sur CodePen.
Réglage des étapes pour un effet de frappe plus court
Et pour ajuster les morceaux de texte plus courts, vous devrez réduire les étapes et la durée de l’animation de saisie :
Voir le stylo
Effet machine à écrire court par SitePoint (@SitePoint)
sur CodePen.
Créer et styliser l’animation du curseur clignotant
De toute évidence, les machines à écrire mécaniques d’origine n’avaient pas de curseur clignotant, mais il est devenu traditionnel d’en ajouter un pour imiter l’effet de curseur clignotant plus moderne de l’ordinateur / du traitement de texte. L’animation du curseur clignotant aide à faire ressortir encore plus le texte tapé des éléments de texte statiques.
Pour ajouter une animation de curseur clignotant à notre animation de machine à écrire, nous allons d’abord créer le blink animation:
@keyframes blink {
from { border-color: transparent }
to { border-color: orange; }
}
À l’intérieur de notre page Web, cette animation changera la couleur de la bordure du typed-out bordure de l’élément — qui est utilisée comme curseur pour l’effet machine à écrire — de transparent à orange.
Nous inclurons cette animation dans le typed-out les règles de la classe et définissez sa propriété de direction d’animation sur infinite pour faire disparaître et réapparaître le curseur .8s pour toujours:
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation:
typing 1s steps(20, end) forwards,
blink .8s infinite;
}
Voir le stylo
Curseur clignotant par SitePoint (@SitePoint)
sur CodePen.
Réglage du code pour l’effet de frappe clignotant
Nous pouvons rendre le curseur plus fin ou plus épais en ajustant sa border-right: .15em solid orange; propriété, ou vous pouvez donner au curseur une couleur différente, lui donner un rayon de bordure, ajuster la fréquence de son effet de clignotement, et plus encore.
Voir le stylo
Curseur clignotant stylisé par SitePoint (@SitePoint)
sur CodePen.
Vous pouvez expérimenter ces propriétés dans la démo CodePen et voir ce que vous pouvez trouver d’autre !
Combinaison des éléments des animations de texte de machine à écrire
Maintenant que vous savez comment créer l’effet de machine à écrire en CSS, il est temps pour moi de vous montrer quelques cas d’utilisation pratiques et pertinents de cet effet de frappe.
Effet de typage de portefeuille
Voici un exemple de portfolio personnel. Les effets de machine à écrire peuvent faire ressortir votre CV Web / site Web personnel et le rendre plus attrayant.
Vous pouvez jouer avec cette démo de portfolio sur CodePen.
Effet de typage API
Voici un exemple de page de destination d’API.
Vous pouvez jouer avec cette démo API sur CodePen.
Il est probable qu’à un moment donné de votre parcours de développement, vous ayez rencontré une page de destination de fournisseur d’API et vu un bloc de code comme celui-ci, démontrant la mise en œuvre de leur API. Personnellement, je trouve qu’il s’agit d’une implémentation vraiment pratique et pertinente de l’effet machine à écrire, et je trouve qu’il semble plus attrayant et invitant qu’un morceau de code statique.
Effet de typage de la page de destination du produit
Voici un exemple de page de destination SaaS/produit.
Vous pouvez jouer avec cette démo de page de produit SaaS sur CodePen.
J’ai constaté que les effets de machine à écrire dans le SaaS ou les pages de destination des produits sont plus invitants et attrayants pour les visiteurs qui souhaitent utiliser leurs produits ou services. Ayant passé beaucoup de temps à développer des services Web et des applications Web, je peux dire par expérience que les effets de frappe créent un intérêt supplémentaire pour vos pages de destination. Un texte dactylographié comme « Commencez dès aujourd’hui » donne un coup de poing supplémentaire au texte d’appel à l’action.
Conclusion
Nous avons vu dans cet article à quel point il est facile d’utiliser le CSS pour créer du texte animé « à la machine à écrire ». Cet effet de frappe peut certainement ajouter de l’intérêt et du plaisir à vos pages Web.
Cela vaut peut-être la peine de terminer par un léger avertissement, cependant. Cette technique est mieux utilisée sur de petites portions de texte non critiques, juste pour créer un peu de plaisir supplémentaire. Mais attention à ne pas trop s’y fier, car l’utilisation d’une animation CSS comme celle-ci présente certaines limites. Assurez-vous de tester le texte de votre machine à écrire sur une gamme d’appareils et de tailles de fenêtres, car les résultats peuvent varier d’une plate-forme à l’autre. Ayez également une pensée pour les utilisateurs finaux qui s’appuient sur les technologies d’assistance et effectuez idéalement des tests d’utilisabilité pour vous assurer que vous ne compliquez pas la vie de vos utilisateurs. Parce que tu pouvez faire quelque chose avec du CSS pur ne signifie pas nécessairement que vous devrait fais-le. Si l’effet machine à écrire est important pour vous et que vous souhaitez l’utiliser pour un contenu plus critique, envisagez peut-être au moins également des solutions JavaScript.
Quoi qu’il en soit, j’espère que vous avez apprécié cet article et qu’il vous a fait réfléchir à d’autres choses intéressantes que vous pouvez faire avec l’animation CSS pour ajouter des touches d’intérêt et de plaisir à vos pages Web.
Source link