Fermer

avril 10, 2022

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.

Animation de machine à écrire des mots

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 CSSpas()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

conteneur pour notre texte de machine à écrire avec une classe dedactylographié:

< !doctype html>
<html>
  <tête>
    <Titre>Effet machine à écrire</Titre>
    <style>corps{
        Contexte: navajowhite;
        taille d'arrière-plan:couverture;
        famille de polices: 'Trébuchet MS',sans empattement; 
      }</style>
  </tête>
  <corps>
    <div classe="récipient"><div classe="dactylographié">Développeur web</div>
    </div>
  </corps>
</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

avec la classe « typé » :

.dactylographié{
  débordement:caché;
  bordure droite: .15danssolideorange;
  taille de police: 1.6rem;
  largeur: 0;
}

Notez que, pour que l'effet machine à écrire fonctionne, nous avons ajouté ce qui suit :

  • "débordement caché;"et un"largeur : 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 solide 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 dudactylographiéé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émentdactylographiéélément et ajouteraffichage : bloc en ligne ;:

.récipient{
  affichage:bloc en ligne;
}

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 dudactylographié élément en cours de saisie, lettre par lettre. Nous utiliserons le@images clésRègle d'animation CSS :

@images clésdactylographie {
  depuis { largeur: 0 }
  pour { largeur: 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 notredactylographiéclasse et définissez sa direction d'animation survers l'avantpour vous assurer que l'élément de texte ne reviendra pas àlargeur : 0une fois l'animation terminée :

.dactylographié{
    débordement:caché;
    bordure droite: .15danssolideorange;
    espace blanc:maintenant;
    taille de police: 1.6rem;
    largeur: 0;
    animation:dactylographie1svers l'avant;
}

Notre élément de texte sera simplement révélé en une seule étape fluide, de gauche à droite :

Voir le stylo
Pas en douceurpar SitePoint (@SitePoint)
surCodePen.

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, oupar étapescomme le ferait une machine à écrire, nous devons diviser ledactylographieanimation incluse par ledactylographié classer en étapes pour qu'il ait l'air d'avoir été tapé. C'est là que lepas()La fonction CSS est disponible :

.dactylographié{
  débordement:caché;
  bordure droite: .15danssolideorange;
  espace blanc:maintenant;
  taille de police: 1.6rem;
  largeur: 0;
  animation:dactylographie1s pas(20,finir)vers l'avant;
}

Comme vous pouvez le voir, nous avons divisé ledactylographieanimation en 20 étapes en utilisant le CSSpas() une fonction. Voici ce que nous voyons maintenant :

Voir le stylo
Plusieurs étapespar SitePoint (@SitePoint)
surCodePen.

Voici notre code complet jusqu'à présent :

<html>
  <tête>
    <Titre>Effet machine à écrire</Titre>
  </tête>
  <style>corps{
      Contexte: navajowhite;
      taille d'arrière-plan:couverture;
      famille de polices: 'Trébuchet MS',sans empattement; 
    }
    .récipient{
      affichage:bloc en ligne;
    }
    .dactylographié{
      débordement:caché;
      bordure droite: .15danssolideorange;
      espace blanc:maintenant;
      animation:dactylographie1s pas(20,finir)vers l'avant;
      taille de police: 1.6rem;
      largeur: 0;
    }
    @images clésdactylographie {
      depuis { largeur: 0 }
      pour { largeur: 100% }
    }</style>
<corps>
<h1>Je suis Matt, je suis un</h1>
<div classe="récipient">
  <div classe="dactylographié">Développeur web</div>
</div>
</corps>
</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 longuepar SitePoint (@SitePoint)
surCodePen.

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 courtpar SitePoint (@SitePoint)
surCodePen.

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 leclignoteranimation:

@images clésclignoter {
  depuis { couleur de la bordure: transparent }
  pour { couleur de la bordure: orange; }
}

À l'intérieur de notre page Web, cette animation changera la couleur de la bordure dudactylographiébordure de l'élément — qui est utilisée comme curseur pour l'effet machine à écrire — de transparent à orange.

Nous inclurons cette animation dans ledactylographiéles règles de la classe et définissez sa propriété de direction d'animation surinfinipour faire disparaître et réapparaître le curseur.8spour toujours:

.dactylographié{
    débordement:caché;
    bordure droite: .15danssolideorange;
    espace blanc:maintenant;
    taille de police: 1.6rem;
    largeur: 0;
    animation:dactylographie1s pas(20,finir)vers l'avant,clignoter.8sinfini;
}

Voir le stylo
Curseur clignotantpar SitePoint (@SitePoint)
surCodePen.

Réglage du code pour l'effet de frappe clignotant

Nous pouvons rendre le curseur plus fin ou plus épais en ajustant sabordure droite : .15em orange solide ;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)
surCodePen.

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.

Lignes de texte du portfolio révélées par l'effet de frappe

Vous pouvez jouer avec cette démo de portfolio surCodePen.

Effet de typage API

Voici un exemple de page de destination d'API.

Code API révélé en mode machine à écrire

Vous pouvez jouer avec cette démo API surCodePen.

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.

Lignes de texte révélées en mode machine à écrire sur une page de destination SaaS/produit

Vous pouvez jouer avec cette démo de page de produit SaaS surCodePen.

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 tupouvezfaire quelque chose avec du CSS pur ne signifie pas nécessairement que vousdevrait 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.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link