Accueil Blog ⇉ Javascript : effet machine à écrire en 3 lignes

Javascript

fun

illustration_article

Une démonstration vaut mieux qu'un long discours






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.

Commençons donc (ça ne va pas être long).

HTML & CSS



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

Javascript


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();


Eh oui, c'est tout ! sans blagues... Ligne par ligne (importantes) :
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 :

help “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.



Modifié le 05-11-2019
Article précédent


JQUERY : texte clignotant qui clignote n'importe comment ! Pourquoi ?
Article suivant


Cookies et navigation : la 11è plaie d'Egypte

Commentaires

 Benkku  2020-07-20

Testé ce code avec jsfiddle. Ca ne fonctionne pas. Dommage car il m'aurait été bien utile

 GBNet  2020-07-21

Bonjour et merci pour le retour.

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




 Clem  2020-12-09

Bonsoir ! Question idiote mais peut on utiliser ce code sur n'importe quel logiciel de montage ? Je ne m'y connais pas du tout et en réalité j'aimerais créer mon texte, l'enregistrer sur mon ordinateur et en faire une vidéo pour intégrer d'autres choses par la suite. Je n'ai qu'une application de montage sur mon smartphone, plus simple que ça tu meures...

 GBNet  2020-12-10

Bonsoir Clem,

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

Publier un commentaire :



capcha   



Raccourcis : php css html sql js img

Prévisualiser
GB-Net.fr 2024



fleche haut
Résultats de votre recherche pour :
reduce close