Machine a ecrire

Version 2.2- 27/06/20

Réutilisez !

TAPUSCRIT

200

Un effet machine à ecrire

Extension proposée par Patrice Nadam d'après le script de

https://webdevpro.net/js-effet-apparition-lettres/

Des zones de paramètrage disparaissent automatiquement

Aucun script à modifier ni à copier !

Tapuscrit est une extension permettant de donner un effet machine à écrire à un paragraphe dont vous pouvez facilement modifier le style. Tapuscrit is an extension that gives a typewriter effect to a paragraph which style you can easily modify.Tapuscrit es una extensión que permite dar un efecto de máquina de escribir a un párrafo cuyo estilo puede modificarse fácilmente.

La vitesse de défilement à indiquer

120

10000

Le texte apparaît 10 s. après l'affichage de la page

Un délai d'apparition à préciser

SelEctionnez (double-clic) et modifiez

Modfiez le style à volonté

SelEctionnez (double-clic) et modifiez

SelEctionnez (double-clic) et modifiez

Un paragraphe unique (pasde saut de ligne ou paragraphe)

Page de création

120

Tapuscrit est une extension permettant de donner un effet machine à écrire à un paragraphe dont vous pouvez facilement modifier le style. Tapuscrit is an extension that gives a typewriter effect to a paragraph which style you can easily modify.Tapuscrit es una extensión que permite dar un efecto de máquina de escribir a un párrafo cuyo estilo puede modificarse fácilmente.

3000

120

Les pages suivantes reprennent l'ancienne méthode avec incorporation de script.

Code à copier coller dans Insérer / AUTRES

<p style="font-size:40px;" id="hello" data-label="En rouge le texte à afficher, en violet la taille du texte et en vert la vitesse"></p> <script>const htmlP = document.getElementById("hello");const txt = htmlP.dataset.label;let i = 0 ;function showLetters(){ let timeOut ; if(i < txt.length) { htmlP.innerHTML += `<span>${txt[i]}</span>` ; timeOut = setTimeout(showLetters,200) i++ } else { clearTimeout(timeOut); console.log("end") }}showLetters();</script>

Taille en px (pixels) Vitesse en ms

Texte avec la police à insérer dans la page

<p style="font-size:40px; color:#00FF00; background-color:yellow;font-familly:'Share Tech Mono';" id="hello" data-label="Le texte à afficher avec l'effet"> </p> <script>const htmlP = document.getElementById("hello");const txt = htmlP.dataset.label;let i = 0 ;function showLetters(){ let timeOut ; if(i < txt.length) { htmlP.innerHTML += `<span>${txt[i]}</span>` ; timeOut = setTimeout(showLetters,200) i++ } else { clearTimeout(timeOut); console.log("end") }}showLetters();</script>

Texte avec la police à insérer dans la page

<p style="font-size:40px; color:white; background-color:red;font-familly:'Share Tech Mono';" id="hello" data-label="TEXTE 1"> </p> <script>const htmlP = document.getElementById("hello");const txt = htmlP.dataset.label;let i = 0 ;function showLetters(){ let timeOut ; if(i < txt.length) { htmlP.innerHTML += `<span>${txt[i]}</span>` ; timeOut = setTimeout(showLetters,200) i++ } else { clearTimeout(timeOut); console.log("end") }}showLetters();</script>

<p style="font-size:40px; color:white; background-color:grey;font-familly:'Share Tech Mono';" id="bonjour" data-label="TEXTE 2"> </p> <script>const htmlP = document.getElementById("bonjour");const txt = htmlP.dataset.label;let i = 0 ;function showLetters(){ let timeOut ; if(i < txt.length) { htmlP.innerHTML += `<span>${txt[i]}</span>` ; timeOut = setTimeout(showLetters,200) i++ } else { clearTimeout(timeOut); console.log("end") }}showLetters();</script>