Les feuilles de style en cascade (CSS) ont parcouru un long chemin depuis leur création. Il y a des choses possibles avec uniquement 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 du CSS est l’émergence et le perfectionnement des fonctions CSS, qui ont considérablement étendu les capacités et la puissance de style 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 taper au clavier au fur et à mesure qu’il se déroule sous les yeux du spectateur. Cet effet rappelle les machines à écrire de la vieille école, les premiers terminaux informatiques ou 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éroule.
Comment fonctionne la fonction CSS steps()
Les fonctions CSS introduisent un niveau de flexibilité qui était auparavant difficile à atteindre en utilisant uniquement des styles statiques. Le pas() function est une fonction populaire utilisée dans les animations CSS. Cela donne l’impression que les animations avancent par étapes distinctes et discrètes au lieu d’une transition en douceur.
pas() est une fonction de synchronisation d’animation qui prend en compte deux paramètres. Le premier paramètre indique le nombre d’étapes que vous souhaitez que votre animation suive. Le deuxième paramètre définit le comportement de chaque étape. La syntaxe du pas() les fonctions ressemblent à ceci :
animation-timing-function: steps(n, direction)
Dans le bloc de code ci-dessus, le pas() la fonction a deux paramètres à savoir : n et direction. Le direction Le paramètre peut être soit commencer ou fin.
Réglage du direction à commencer garantit que la première étape est terminée dès le démarrage de l’animation. Alors que, en fixant le direction à fin exécutera la dernière étape à la fin de l’animation. Pour illustrer l’importance du pas() fonction, jetez un œil au code HTML suivant :
<div class="container">
<div></div>
</div>
Le bloc de code ci-dessus définit un récipient div avec un enfant div. Si vous souhaitez que le div enfant glisse sur l’écran, vous utilisez des animations CSS comme celle-ci :
.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 bloc de code ci-dessus utilise le Règle @keyframes pour définir une animation nommé boîte de déplacement. Cette animation est ensuite appliquée au div enfant, le faisant se déplacer en douceur sur l’écran dans une boucle infinie.
Si vous n’aimez pas les animations fluides et souhaitez obtenir un effet « saccadé », vous pouvez utiliser l’option pas() fonctionne comme ceci :
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Comme vous pouvez le voir dans le GIF ci-dessous, intégrant le pas() La fonction avec une valeur de paramètre de 10 animera le div enfant par étapes au lieu d’une animation fluide. Plus le nombre d’étapes est élevé, moins votre animation sera saccadée.
Dans l’exemple ci-dessus, le direction Le paramètre est fourni. Cependant, si vous omettez le directionle navigateur utilisera fin comme valeur par défaut pour direction.
Créer l’effet machine à écrire
Maintenant que vous comprenez comment le pas() fonctionne, 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 index.htm fichier pour le balisage et un style.css fichier pour le style.
Dans le index.htm fichier, ajoutez le code passe-partout 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="style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
Le bloc de code ci-dessus définit le balisage d’un site HTML simple. Il y a un récipient div qui contient un autre div avec un texte factice.
Animer le texte
Ouvrez le styles.css fichier et définissez la largeur du récipient div à la largeur de son contenu.
.container{
width: fit-content;
}
Ensuite, en utilisant le @keyframes En règle générale, définissez une animation qui contrôle la façon dont l’animation progresse dans le temps. Réglez la largeur sur “0%” à 0%. À 100%définissez la largeur sur “100 %” comme ceci :
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Ensuite, sélectionnez l’élément avec le nom de la classe texte et réglez le débordement propriété à caché. Cela garantira que le texte reste masqué tant que l’effet de frappe n’a pas commencé. Après cela, assurez-vous que le texte reste sur une seule ligne en définissant le espace propriété à maintenant. Donner la texte classez une police monospace et ajoutez une bordure verticale verte à droite du texte.
Cette bordure donnera l’apparence d’un curseur. Définissez le paramètre approprié taille de police et le animation propriété à taper du texte. Enfin, ajoutez le pas() fonction à la fonction de synchronisation d’animation.
.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, voici ce que vous devriez voir :
Si vous souhaitez un effet de frappe plus long, vous pouvez ajuster la durée de l’animation et le nombre d’étapes spécifiés dans le pas() fonction.
Donner vie au curseur
L’effet machine à écrire est presque terminé, bien qu’il manque une fonctionnalité, à savoir le curseur clignotant. Rappelons 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 le @keyframes règle également.
@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 au animation propriété sur le texte classe et définissez la durée sur 0,6 seconde.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Désormais, lorsque vous exécutez le code, vous devriez voir un curseur clignotant.
La puissance des fonctions CSS
Les fonctions CSS ont révolutionné la façon dont les sites Web sont construits, vous offrant une boîte à outils remarquable en tant que développeur. Ces fonctions polyvalentes permettent un style et des interactions dynamiques qui étaient autrefois réservées aux langages de script complexes.
Des manipulations de couleurs aux mises en page réactives, animations et transformations créatives, les fonctions CSS ont élargi les possibilités de la conception Web. Avec des fonctions telles que calc() pour des calculs flexibles, Linear-gradient() pour des arrière-plans époustouflants et Translate() pour des animations captivantes, vous pouvez créer des expériences utilisateur visuellement attrayantes et engageantes.
to www.makeuseof.com
Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931
Jeu de briques
Snake
Pacman
Bubble