Sélectionner une page

L’effet “typewriter”

9 Juin 2021 | Web

Graphisme à la main pour

fleurs

extrait de la page d’accueil de ce site

Créer du mouvement sur les pages de ton site aide à capturer les regards des visiteurs. C’est la raison pour laquelle au fil du temps, sur les sites comme sur les réseaux sociaux, on voit apparaître de plus en plus de format vidéos.

Mais ces vidéos questionnent. Elles sont gourmandes et ont un impact carbone non négligeable. Elles alourdissent facilement les pages web et leur contenu n’est pas forcément toujours très utile.

 

Dynamise avec légerté une page de site statique

Ici une simple ligne de code suffit pour amener du mouvement et de l’originalité. Le jeu est infini et très agréable.

Il s’agit, à la base, d’une librairy Javascript développée par Matt Boldt qui s’appelle Typed.js. Ce sont deux lignes de codes à insérer dans le site qui permettent d’afficher ce mouvement.

 

étape 1 : Ajoute le script JQuery

  • Va dans ton interface Administrateur
  • Va dans Divi > Options du thème
  • Va sur l’onglet “L’Integration”
  • Copie le code ci-dessous dans la fenêtre “Ajouter ligne de code à la < head > de votre blog”
  • Sauvegarde tes changements

Voici le code : 

<script>
(function ($) {
  // écris la ligne
  //
  function typeString($target, string, cursor, delaytyping, calllback) {
    $target.html(function (_, html) {
      return html + string[cursor];
    });

    if (cursor < string.length - 1) {
      setTimeout(function () {
        typeString($target, string, cursor + 1, delaytyping, calllback);
      }, delaytyping);
    }
    else {
      calllback();
    }
  }

  // efface la ligne après l'avoir écrite
  function deleteString($target, delaydeleting, callback) {
    var length;

    $target.html(function (_, html) {
      length = html.length;
      return html.substr(0, length - 1);
    });

    if (length > 1) {
      setTimeout(function () {
        deleteString($target, delaydeleting, callback);
      }, delaydeleting);
    }
    else {
      callback();
    }
  }

  // jQuery hook
  $.fn.extend({
    typewritereffect: function (opts) {
      var settings = $.extend({}, $.typewritereffect.defaults, opts);

      return $(this).each(function () {
        (function loop($tar, idx) {
          // type
          typeString($tar, settings.text[idx], 0, settings.delaytyping, function () {
            // delete
            setTimeout(function () {
              deleteString($tar, settings.delaydeleting, function () {
                loop($tar, (idx + 1) % settings.text.length);
              });
            }, settings.pause);
          });

        }($(this), 0));
      });
    }
  });

  // Ici tu peux définir le tempo par défaut pour les effet de typewriter
  // 1) delaytyping: nombre de millisecondes entre chaque caractère tapé
  // 2) delaydeleting: nombre de millisecondes entre chaque effacement de caractère 
  // 3) pause: nombre de millisecondes  de pause après q'une ligne soit entièrement écrite
  $.extend({
    typewritereffect: {
      defaults: {
        delaytyping: 150,
        delaydeleting: 50,
        pause: 1000,
        text: []
      }
    }
  });
}(jQuery));

jQuery(document).ready(function($) {

  // Cette partie écrit le texte dans notre élément avec l'ID 'typewriter'
  // Change les mots ci-dessous pour afficher le texte que tu souhaites
  $('#typewriter').typewritereffect({
    text: ['des champs.','des jardins.','qui soignent.','qui parfument.','discrètes.','éclatantes.']
  });
}
)

</script>

étape 2 : Personnalise le texte à afficher

Sur le Script ci-dessus, regarde à la ligne 82 : tu liras une ligne de mots rouges entre guillemets séparés par des virgules. Ce sont les mots que j’ai choisi d’afficher sur mon site. Remplace-les par ceux que tu souhaites utiliser. Tu peux aussi écrire des phrases entières.

étape 3 : Ajoute un éléments où afficher le texte

Ajoute un module texte (ou autre) à ta page  et attribues-lui l’ID de « typewriter » et la class de « typewriter_text » pour afficher cet effet. Pour créer mon exemple ci-dessus, j’ai ajouté un module texte, j’ai écrit l’amorce de ce texte puis j’ai collé à la fin de ce texte, dans l’onglet “text” le bout de code ci-dessous :

<span id='typewriter' class='typewriter_text'></span></p>

étape 4 : Ajoute l’effet du curseur clignotant

Au même endroit que le premier script (Divi > Options du theme > L’Intégration > head) et à la suite du précédent, colle ce code ci-dessous si tu souhaites ajouter l’effet de clignotement du curseur : 

<style>
/* Personnalise le texte du typewriter si tu le souhaites */
.typewriter_text {
  color: #6e6c4f;
}
/* Personnalise le curseur clignotant */
.typewriter_text:after {
  content: "|";
  display: inline-block;
  color: #6e6c4f;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}
/* Définis le clignotement */
@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
</style>

Petit plus : Ajoute plusieurs effets à différents endroits de ton site

Tu peux utiliser ce code à plusieurs endroits de ton site pour afficher des textes différents. Pour ce faire :

  • Créée un nouvel éléments sur ta page et donne-lui un ID spécifique (par exemple : typewriter2) 
  • Créée une copie des lignes 81-83 dans le script où il est écrit : 

 $('#typewriter').typewritereffect({
    text: ['des champs.','des jardins.','qui soignent.','qui parfument.','discrètes.','éclatantes.']
  });

  • Mets à jour ton code jQuery dans le <head> en utilisant l’ID de ce nouvel élément et en changeant les mots ou phrases à afficher. Par exemple : 

 $('#typewriter2').typewritereffect({
    text: ['des sous bois.','des fossés.','mellifères.','vénéneuses.','d'hiver.','d'été.']
  });

  • Sauvegarde tes changements.

Tu peux répéter cette opération autant de fois que nécessaire.

 

 

Source anglophone de l’astuce : Divi Hype