REUTILISABLE Machine a ecrire

0

200

TAPUSCRIT

Un effet machine à ecrireNOUVELLE VERSION

Version 2.0 - 19/06/20

Réutilisez !

10000

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.

Aucun script à modifier ni à copier !

La vitesse de défilement à indiquer

Un délai d'apparition à préciser

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

Des zones de paramètrage disparaissent automatiquement

SelEctionnez (double-clic) et modifiez

SelEctionnez (double-clic) et modifiez

Un paragraphe unique (pasde saut de ligne ou paragraphe)

SelEctionnez (double-clic) et modifiez

Modfiez le style à volonté

10000

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.

Page de création

0

120

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

Taille en px (pixels)Vitesse en ms

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

Code à copier coller dans Insérer / AUTRES

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

Texte avec la police à insérer dans la page

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