text-typewriter

Cette action affiche plusieurs mots ou phrases successivement avec un effet de machine à écrire.

Un exemple simple

le plugin UP est

L'effet ci-dessus est fait avec ce shortcode

le plugin UP est {up text-typewriter=génial, fantastique, hyper-pratique | loop}

En dehors de la liste des mots à faire tourner, séparés par des virgules, l'option loop permet de répéter l'action.

Il est possible d'utiliser du bbcode pour mettre en forme les mots comme ci-dessous :

le plugin UP est

le plugin UP est {up text-typewriter=[b class='t-rougeFonce']génial[/b], [i]fantastique[/i], [span class='bg-jaune']hyper-pratique[/span] | loop}

Saisie et mise en forme wysiwyg

Une autre méthode pour spécifier les mots ou groupe de mots est de les mettre entre le shortcode ouvrant et fermant.

<p>le plugin UP {up text-typewriter | loop}</p>
<p> <span class="badge-bleu">sait presque tout faire</span></p>
<p>est français  <img src="/images/icons/32/france.png" /></p>
<p><span style="color: #ff0000; background-color: #ffff00;">facilite le travail des webmasters </span></p>
<p><strong>permet de faire des choses impossibles</strong></p>
<p>{/up text-typewriter}</p>

Chaque alternative doit être dans un bloc directement enfant.  Pour exemple, une liste à puces pour proposer plusieurs alternatives ne convient pas car c'est le bloc UL qui sera utilisé et non les items LI.

Les options

typeSpeed est la durée en millisecondes entre chaque frappe de lettre

backSpeed est la durée en millisecondes entre chaque effacement de lettre

startDelay est le délai en millisecondes avant de commencer la première ou une nouvelle série

smartBackspace efface uniquement les caractères qui diffèrent de la phrase précédente. La première alternative est toujours effacée.

{up text-typewriter=le plugin UP me fait gagner du temps, le plugin UP est totalement gratuit, le plugin UP est français | loop | smartBackspace | backSpeed=150}

fadeOut efface en une fois le mot et non lettre par lettre

le plugin UP est

shuffle affiche les phrases dans un ordre aléatoire

Des mots aléatoires :

Des mots aléatoires : {up text-typewriter=UN, DEUX, TROIS, QUATRE, CINQ, SIX, SEPT, HUIT, NEUF | shuffle | class=bg-jaune | loop | typeSpeed=50}

 Il existe d'autres options moins utilisées. Je vous laisse les découvrir en cliquant sur le bandeau bleu au début de cet article.

 Un exemple de texte sur image

<p>{up div=abs-bloc}</p>
  <p><img src="/images/photos/cornemuse-au-soleil-couchant.jpg" class="w100"></p>
  <p>{up div=abs-center w100 tc mb3 t-blanc}</p>
    <p>{up text_typewriter | loop | typeSpeed=100 | showCursor=false | class=b fs400 fsm300 fss200 }</p>
      <p>Sérénité</p>
      <p><span style="color: #ffff99;">Enchanteur</span></p>
      <p><span style="color: #800000;">Plénitude</span></p>
    <p>{/up text_typewriter}</p>
  <p>{/up div}</p>
<p>{/up div}</p>

1. on déclare un bloc en display absolute pour permettre de centrer le texte
2. l'image qui servira de fond. sa largeur est forcée à 100%
3. le bloc (absolute au centre) des textes qui seront centrés et blancs
4. le shortcode pour type-writer. en boucle sans affichage du curseur. Les classes déterminent le gras et la taille du texte pour les différents types d'écrans
5. un texte (blanc par défaut)
6. un autre texte jaune très clair
7. encore un texte en rouge foncé
8. la femeture du shortcode text-typewriter
9. la femeture du shortcode div pour les textes
10. la femeture du shortcode div pour l'image