frendeitpt

text-typewriter

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

🆙 text_typewriter : Afficher plusieurs phrases avec un effet machine à écrire

Cliquer pour lire la documentation

syntaxe 1 : {up text-typewriter=mot1, mot2, ..., motN}
syntaxe 2 : {up text-typewriter}alternatives dans blocs enfants {/up text-typewriter}
version UP-2.4 author LOMART license GNU/GPLv3 credit script typed.js de mattboldt tags HTML
  • text_typewriter: liste de mots séparés par des virgules
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • css-head (base-css): style ajouté dans le HEAD de la page
  • typeSpeed = 0: vitesse de frappe en ms
  • startDelay = 0: délai en ms avant chaque série
  • backSpeed = 0: vitesse de l'espacement arrière en millisecondes
  • smartBackspace = true: n'efface que ce qui ne correspond pas à la chaîne précédente
  • shuffle = false: mélange les phrases
  • backDelay = 700: délai en ms avant effacement
  • fadeOut = false: Fondu au lieu de retour en arrière
  • fadeOutClass = typed-fade-out: classe CSS pour l'animation du fondu
  • fadeOutDelay = 500: Durée du fondu en millisecondes
  • loop = false: chaînes en boucle
  • loopCount = Infinity: nombre de boucles
  • showCursor = true: montrer le curseur
  • cursorChar = |: caractère pour le curseur
  • autoInsertCss = true: insérer le CSS pour le curseur et le fadeOut dans le HTML
  • attr = null: attribut pour la saisie. Ex: input placeholder, value, or just HTML text
  • bindInputFocusEvents = false: lier le focus et le blur si élément est une entrée de texte
  • contentType = html: 'html' ou 'null' pour texte brut

    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.

    le plugin UP

    sait presque tout faire

    est français 

    facilite le travail des webmasters

    permet de faire des choses impossibles

     

    la vue en mode wysiwyg

    la vue en mode code

    <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

    Par défaut, typeSpeed=0

    le plugin UP est

    typeSpeed=150

    le plugin UP est

    typeSpeed=450

    le plugin UP est

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

    Par défaut, backSpeed=0

     le plugin UP est

    backSpeed=150

     le plugin UP est

    backSpeed=450

     le plugin UP est

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

    Par défaut, startDelay=0

     le plugin UP est

    startDelay=2000

     le plugin UP est

    startDelay=6000

     le plugin UP est

    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

    Sérénité

    Enchanteur

    Plénitude

    Les shortcodes en vue code

    <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