JQuery : effet machine à écrire en 3 lignes

Publié le 08-10-2019
etoiles_notation etoiles_notation etoiles_notation etoiles_notation etoiles_notation
Votes : 2 - Note : 4.5




JQuery, effet de machine à écrire avec frappe aléatoire et attributs texte de CSS



jquery

fun


JQuery : effet machine à écrire en 3 lignes

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">
<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.
<div id="cont">
<p id="rs" >
</p>
</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.

JQuery


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 syntaxe du setTimeout, c'est Write, et non Write() sinon, ça lève une erreur



Modifié le 14-10-2019

Commentaires

Pas encore de commentaire

Publier un commentaire :



capcha   






GB-Net.fr 2019