Javascript : effet machine à écrire en 3 lignes
Javascript, effet de machine à écrire avec frappe aléatoire et attributs texte de CSS
Accueil du blog
Derniers articles
Javascript
fun
Un peu de divertissement avec ce petit bout de script qui, comme vous le voyez, reproduit la frappe d'une machine à écrire avec une vitesse aléatoire.
On peut jouer sur tous les attributs CSS de texte, line-height, font-family, sauts de lignes et retour chariot, couleur, longueur de texte illimitée etc... de façon à obtenir ce qu'on veut.
On peut également lui coller un fichier son pour reproduire la frappe, à condition d'en trouver un qui soit suffisamment court pour pouvoir être répété à la même vitesse que la frappe, je n'ai pas réussi, mais j'ai laissé le code pour ça en commentaire.
@font-face {
font-family: 'my_under';
src: url('fonts/myunderwood.ttf') format('ttf'),
url('fonts/myunderwood-webfont.woff2') format('woff2'),
url('fonts/myunderwood-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{background-image: url('112.png');}
#test{width: 1px; height:1px;}
#cont {width: 630px;height:180px;overflow:hidden;}
#rs {line-height:51px;margin-top:16px;margin-left:89px;text-align:left;width:560px;height:180px;overflow:hidden;font-family:my_under;font-size:16px;}
<div id="test">
<textarea id="sp">Ce petit script en JQuery (trois lignes effectives) permet de reproduire la frappe d'une machine à écrire à une vitesse aléatoire. Il est ultra-léger et entièrement modulable.</textarea>
<div id="cont">
<p id="rs" >
</p>
</div>
</div>
Pour ceux que ça intéresse, il n'y a pas grand-chose à dire ;-) tout d'abord, choix d'une police "vintage", d'un vieux papier en image de fond ; je suis parti d'un textarea pensant que chacun pourrait tester avec son propre texte, mais j'ai un problème de place-). Pour obtenir le style souhaité, c'est le p qu'on va styler comme on veut, cf ci-dessus.
Passons donc au petit script.
var array = Array.from($("#sp ").val());
$("#sp").hide();
var i = 0;
var rand;
//var audio = new Audio('key.mp3');
for(y=19;y<25;y++) {
array[y] = '<span style="color:#CF0202;">'+array[y]+'</span>';
}
function Write(){
//audio.play();
/* if(i == 5) {
$("#rs").append("<br />");
}*/
$("#rs").append(array[i]);
rand = Math.floor(Math.random() * (600 - 24 + 1)) + 24;
if(i<array.length) {
setTimeout(Write,rand);
}
i++;
}
Write();
1- on récupère la valeur du textarea et on passe le string en tableau de chars.
3 - 4 on initialise deux variables
5 - on (peut) créer un objet audio (faut juste avoir le fichier qui va bien, et vouloir mettre du son)
Rentrons dans le vif du sujet :
“En fait c'est 7 lignes -)”
6-7 changement de couleur : on indique quels indexes changent de couleur (ici, entre 19 et 25)
10 - la fonction (récursive) qui va tout faire
12-13-14 Très important : Pour placer un saut de ligne, comme le texte a été parsé, on ne peut plus rien en faire en terme de tags, il faut l'inclure tel quel ; l'index [5] indique après quel caractère ce tag sera placé.
16 - A chaque boucle, la fonction Write va ajouter une lettre, tandis qu'on va définir un nouveau délai aléatoire avec la ligne 17 et rappeler Write, avec ce nouveau délai (19) tandis que l'index de la lettre augmente de 1 (i++).
23 - on termine par le début : l'appel initial à la fonction Write().
La configuration de ce script peut être revue à n'importe quel stade, on peut changer de police d'écriture et obtenir un machin ultra-futuriste, et passer un entier à la place de rand dans le setTimeout pour ne plus avoir l'effet aléatoire.
A propos d'effet aléatoire, pour changer la vitesse de frappe (max et min), il faut trifouiller les nombres de cette ligne rand = Math.floor(Math.random() * (600 - 24 + 1)) + 24; ; au besoin, la doc est ici
NB : Notez la syntatxe du setTimeout : c'est Write et non Write(), sinon ça ne marche pas.
Etonnant, il n'y a pas de raison que ça ne marche pas, c'est le même code (à part le "démarrer") :
jsfiddle
Cordialement
Guillaume
Euh, très franchement, je n'y connais absolument rien, je n'en ai strictement aucune idée :(
De prime abord, je vous dirai non, mais il vaut mieux demander à un pro qui pourra sans doute vous conseiller un outil plus adapté.
Bon courage !
Guillaume
