Name: Tremplin Numérique
Price range: $$$

Vous avez probablement vu une de ces animations de texte en ligne, en particulier sur les sites de portefeuille ou les pages de produits. Ils offrent une façon intéressante de répertorier plusieurs fonctionnalités, services ou autres attributs. Vous pouvez reproduire cet effet sans gifs animés ni même n'importe quel javascript.

Sommaire

Comment fonctionne l'animation de machine à écrire

Voici l'effet que je couvrirai:

J'ai découvert une approche CSS pour cette animation sur le site Web de Dashiell Wood, bien que j'avais vu le même effet de nombreuses fois auparavant.

Lorsque vous créez une animation dans CSS, il est important de le planifier à l'avance, pour identifier les horaires. Le comportement exact de cette animation est:

Commencez par l'expression «Je suis Bobby Jack, un écrivain.» Vous pouvez varier ce texte comme vous le souhaitez; L'important est qu'un espace réservé invisible sera remplacé par des mots d'un ensemble.
Insérez un mot – «technologie» – à la position d'espace réservé (entre les mots «a» et «écrivain»), une lettre à la fois, créant un effet de style machine à écrire.
Une fois le mot terminé, arrêtez-vous brièvement.
Après la pause, supprimez le mot précédent, inversant l'animation de typage originale. Cela semble que quelqu'un supprimait chaque lettre en utilisant la touche arrière.
Une fois le mot complètement supprimé, commencez à taper le mot suivant, en répétant les étapes 2—4.
Lorsque tous les mots ont été affichés, arrêtez-vous; Ne supprimez pas le dernier mot.

Par ailleurs, une deuxième animation crée un effet de curseur clignotant. Cette animation est beaucoup plus simple, donc je continuerai en montrant comment le créer.

Créer un curseur animé

Si vous n'êtes pas familier avec les animations dans CSS, c'est un excellent moyen de commencer. L'animation du curseur (ou «caret») est simple, mais il démontre les concepts principaux d'animation dans le navigateur.

Le CSS de base pour le curseur ressemble à ceci:

        .typewritertext::after {
    content: "";
    border-right: 1px solid currentcolor;
}

Étant donné que le curseur doit apparaître à droite de l'espace réservé du texte, ce CSS utilise le ::après pseudo-élément et frontière pour tracer une fine ligne verticale. Le contenu La propriété est requise pour que le pseudo-élément apparaisse.

Dans CSS, l'animation se compose de deux parties:

Identifiez les cadres de l'animation, en définissant leur timing et leurs effets.
Appliquez l'animation globale aux éléments souhaités, en définissant son comportement global.

Pour définir les cadres dans CSS, commencez par utiliser cette syntaxe, qui crée une animation nommée:

        @keyframes  {
}

À l'intérieur des accolades, vous devrez définir chaque partie distincte de l'animation par son temps et ses propriétés relatives:

        <times> { <properties> }

Vous ne pouvez pas animer toutes les propriétés CSS, vous devrez donc rechercher lesquelles fonctionnent bien pour chaque exigence. Un curseur clignotant doit alterner entre deux états: se montrer complètement et complètement éteint. Le opacité La propriété est parfaite pour ce type d'affichage en alternance: il peut être animé, et il est facile à utiliser:

        @keyframes blinkingEffect {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

Ces images clés décrivent une animation qui commence à pleine opacité (visible). Il progresse ensuite vers une opacité zéro (invisible) à mi-chemin, avant de revenir à la pleine opacité à la fin de l'animation. Étant donné que les états de début et de fin sont les mêmes, vous pouvez les regrouper:

        @keyframes blinkingEffect {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

Tout élément qui utilise ces images clés alternera désormais entre visible et invisible, selon les paramètres d'animation. Le animation La propriété est un raccourci pour de nombreuses propriétés distinctes:

délai d'animation
direction d'animation
durée d'animation
mode d'animation
compte d'animation-itération
nom d'animation
Animation-play-State
animation-timeline
animation-timing-fonction

Pour un curseur clignotant, nous n'utiliserons que quatre d'entre eux: nom, durée, fonction de synchronisation et nombre d'itération:

        .typewritertext::after {
animation: blinkingEffect 0.5s linear infinite;
}

Tout d'abord, nous lions l'animation aux images clés définies précédemment, en utilisant le clignotant nom. La durée est définie sur 0,5 sdonc le curseur clignote deux fois par seconde. Le linéaire La fonction de synchronisation signifie que le navigateur modifiera progressivement la valeur d'opacité à un rythme constant. Par exemple, au point de 25%, l'opacité doit être exactement 0,5. Cela crée un effet de fondu agréable dans / out à mesure que l'opacité change. Enfin, le infini Le nombre d'itération signifie que l'animation se poursuivra indéfiniment.

Animer le texte avec CSS

Maintenant que vous avez utilisé les bases de l'animation CSS pour créer un simple curseur clignotant, il est temps de passer à l'effet de machine à écrire. Je vais montrer comment construire cela par étapes, en commençant par le balisage de base qui ressemble à ceci:

        <div id="headline">
    I’m Bobby Jack,br> a <span class="typewritertext">span> writer.
div>

Le CSS de base pour ce titre utilise des propriétés communes pour coiffer le texte:

        
    font-size: 40pt;
    text-align: center;
    font-family: helvetica, sans-serif;
    font-weight: 700;
}

Comme pour le curseur clignotant, nous utiliserons la propriété CSS animation pour appliquer des images clés à un élément à l'intérieur du titre; Cette fois, avant l'espace réservé:

        .typewritertext::before {
    content: "";
    animation: typingEffect 10s 1 forwards;
}

Alors maintenant, vous aurez juste besoin de définir les images clés appropriées pour l'animation. En commençant par un seul mot, vous pouvez créer une animation de frappe simple en ajoutant chaque lettre au contenu de l'élément à chaque étape. Les tailles de pas doivent être divisées par le nombre d'étapes, une pour chaque lettre.

Pour montrer le mot «imprimer», divisez 100 par le nombre de lettres, 5, pour obtenir 20. Utilisez maintenant cela comme incrément pour chaque image clé:

        0% { content: ""; }
20% { content: "p"; }
40% { content: "pr"; }
60% { content: "pri"; }
80% { content: "prin"; }
100% { content: "print"; }

Il y a encore un peu à faire, mais vous pouvez voir l'animation commencer à prendre forme déjà:

Ensuite, essayez d'imprimer le mot, puis de le supprimer. Étant donné que la suppression inverse simplement les étapes d'origine, vous pouvez utiliser la même syntaxe de regroupement de plus tôt, pour utiliser la même propriété à plusieurs points de l'animation.

Le seul bit délicat est d'obtenir le nombre d'étapes – et, par conséquent, les incréments – se corrigent. Pour garder tout égal, vous aurez besoin de deux fois le nombre d'étapes comme auparavant, moins un, car la dernière étape ne devrait pas se produire deux fois (nous examinerons en faire une pause appropriée bientôt).

Pour «imprimer», cela signifie que nous avons 100/11 = 9,0909 étapes. Par souci de simplicité, je vais recommencer à 9, en donnant:

        0%, 100% { content: ""; }
9%, 90% { content: "p"; }
18%, 81% { content: "pr"; }
27%, 72% { content: "pri"; }
36%, 63% { content: "prin"; }
45%, 54% { content: "print"; }

Si vous essayez ces images clés, vous verrez un effet fluide qui tape le mot, puis le supprime avant de s'arrêter:

À l'heure actuelle, la pause sur le mot complet (45% à 54%) est la même longueur que le typage d'un caractère. Pour prolonger la pause, ajuster simplement les valeurs de l'image clé. Par exemple, au lieu d'une pause de 9%, essayez une avec 20%. Cela laisse 80% pour le reste de l'animation, qui est maintenant de 10 étapes, donc 8% chacun:

        0%, 100% { content: ""; }
8%, 92% { content: "p"; }
16%, 84% { content: "pr"; }
24%, 76% { content: "pri"; }
32%, 68% { content: "prin"; }
40%, 60% { content: "print"; }

À ce stade, pour une flexibilité maximale, c'est une bonne idée de considérer la formule que vous utilisez pour générer ces images clés. Si chaque image clé dure x%, alors le mot d'origine à cinq lettres, «Print», a duré 20%:

        5x = 100

Avec la suppression et une pause (y), vous obtiendrez cette variation:

        10x + y = 100

Si la pause est deux fois plus longue, alors y = 2x que vous pouvez remplacer dans la formule ci-dessus pour donner:

        10x + 2x = 100

Cela donne une valeur pour x de 8,3 récurrente, que j'ai arrondi à 8, puis compensé en arrondissant Y dans l'autre sens, de 16 à 20. Ce n'est pas très précis, mais c'est bien pour une animation simple. Si vous souhaitez utiliser des valeurs avec plus de décimales pour les horaires de l'image clé, vous êtes libre de le faire, cela impliquera juste un peu plus de travail si vous calculez les choses manuellement.

Rappelons que l'animation complète implique plusieurs mots, chacun se supprime jusqu'au dernier. Pour cela, vous aurez besoin d'une formule pour déterminer le nombre de «types»; caractères tapés ou supprimés:

        Number of types = total characters of all words before the last one * 2
                  + 1
                  + characters in final word

Ainsi, avec «imprimer» (5 * 2 + 1) et «numérique» (7), ce serait 11 + 7 = 18. Avec une seule pause entre ces deux mots, la formule antérieure devient:

        18x + y = 100

Pour plus de mots, le nombre de pauses est de moins que le nombre total de mots, donc pour animer les mots «technologie», «imprimer», «numérique» et «technologie», vous aurez besoin:

        (10 + 5 + 7) * 2
+ 1
+ 10
= 55

Avec une pause 7x, cela donne:

        55x + 3y = 100
76x = 100
x = 1.316
y = 9.212

Vous avez maintenant les éléments constitutifs pour créer ce type d'animation spécifique avec tout ensemble de mots que vous choisissez. Appliquez simplement la formule, élaborez les horaires et écrivez le CSS.

Pourquoi est-ce meilleur que JavaScript?

Il n'y a pas d'équivalent de l'animation CSS qui est intégrée à JavaScript. Vous pouvez soit écrire votre propre code d'animation – ce qui pourrait être une tâche assez importante ou utiliser une bibliothèque tierce comme Anime.js. Mais, même alors, vous devrez apprendre à utiliser cette bibliothèque.

Réduire les dépendances est généralement une bonne chose. Surtout lorsque certains utilisateurs peuvent faire désactiver JavaScript, il est préférable de ne pas en compter, sauf si vous le devez. La pratique de l'amélioration progressive signifie que tout le monde peut accéder à votre fonctionnalité de base, tandis que les cloches et les sifflets sont disponibles pour ceux qui peuvent en faire l'expérience.

JavaScript peut être indisponible pour de nombreuses raisons: pare-feu, erreurs de réseau, configuration du navigateur, erreurs de script. Le CSS peut également être indisponible, mais il est généralement moins susceptible de l'être.

Le principal inconvénient avec cette technique est le travail impliqué dans la configuration, en particulier avec des mots plus longs ou un plus grand nombre d'entre eux. Pourtant, les sommes impliquées ne sont pas trop complexes, et elles seraient simples à générer automatiquement.

Un autre problème est qu'un simple ajustement, comme l'ajout ou la suppression d'une lettre pour réparer une faute de frappe, vous obligera à recalculer l'ensemble complet des images clés. Encore une fois, la génération des images clés à partir d'un ensemble de mots d'entrée résoudrait ce problème.