Machine a ecrire
Collectif SCAPE (sca
Created on May 29, 2020
More creations to inspire you
SLYCE DECK
Personalized
LET’S GO TO LONDON!
Personalized
ENERGY KEY ACHIEVEMENTS
Personalized
HUMAN AND SOCIAL DEVELOPMENT KEY
Personalized
CULTURAL HERITAGE AND ART KEY ACHIEVEMENTS
Personalized
DOWNFALLL OF ARAB RULE IN AL-ANDALUS
Personalized
ABOUT THE EEA GRANTS AND NORWAY
Personalized
Transcript
0
200
Un effet machine à ecrire
Version 2.2- 27/06/20
Réutilisez !
TAPUSCRIT
https://webdevpro.net/js-effet-apparition-lettres/
Extension proposée par Patrice Nadamd'après le script de
10000
120
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
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.
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é
3000
120
Page de création
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.
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>