Je crois que ça fait des années que je n'ai rien posté ici.
Je ne suis pas très bon en JavaScript. Je débute même. Je prévois de commencer par la théorie un jour, mais pour le moment, pas le temps, et j'ai des petites choses à faire avec malgré tout. Voilà mon problème. J'ai un titre dont chaque lettre est isolée dans un span avec un id différent (solution temporaire, j'y reviendrais après). Je veux légèrement déplacer chaque lettre sur les deux axes en sélectionnant aléatoirement entre trois valeurs (neuf positions par lettre, donc) appliquées à une propriété CSS transform.
Pour le moment, j'ai ça dans l'HTML :
Code : Tout sélectionner
<h1>
<a href='#' onclick='melange();'>
<span id='c01'>p</span><!--
--><span id='c02'>r</span><!--
--><span id='c03'>o</span><!--
--><span id='c04'>b</span><!--
--><span id='c05'>a</span><!--
--><span id='c06'>b</span><!--
--><span id='c07'>l</span><!--
--><span id='c08'>e</span><!--
--><span id='c09'>m</span><!--
--><span id='c10'>e</span><!--
--><span id='c11'>n</span><!--
--><span id='c12'>t</span>
</a>
</h1>
Code : Tout sélectionner
// agitateur de titre
// le code le plus redondant de l'univers
var valeurs = new Array("-5","0","5");
function alea() {
position = valeurs[Math.floor(Math.random()*valeurs.length)];
}
function melange() {
var lettre01 = document.getElementById('c01');
var lettre02 = document.getElementById('c02');
var lettre03 = document.getElementById('c03');
var lettre04 = document.getElementById('c04');
var lettre05 = document.getElementById('c05');
var lettre06 = document.getElementById('c06');
var lettre07 = document.getElementById('c07');
var lettre08 = document.getElementById('c08');
var lettre09 = document.getElementById('c09');
var lettre10 = document.getElementById('c10');
var lettre11 = document.getElementById('c11');
var lettre12 = document.getElementById('c12');
alea(); lettre01.style.transform = "translateX(" + position + "px)";
alea(); lettre01.style.transform = lettre01.style.transform + "translateY(" + position + "px)";
alea(); lettre02.style.transform = "translateX(" + position + "px)";
alea(); lettre02.style.transform = lettre02.style.transform + "translateY(" + position + "px)";
alea(); lettre03.style.transform = "translateX(" + position + "px)";
alea(); lettre03.style.transform = lettre03.style.transform + "translateY(" + position + "px)";
alea(); lettre04.style.transform = "translateX(" + position + "px)";
alea(); lettre04.style.transform = lettre04.style.transform + "translateY(" + position + "px)";
alea(); lettre05.style.transform = "translateX(" + position + "px)";
alea(); lettre05.style.transform = lettre05.style.transform + "translateY(" + position + "px)";
alea(); lettre06.style.transform = "translateX(" + position + "px)";
alea(); lettre06.style.transform = lettre06.style.transform + "translateY(" + position + "px)";
alea(); lettre07.style.transform = "translateX(" + position + "px)";
alea(); lettre07.style.transform = lettre07.style.transform + "translateY(" + position + "px)";
alea(); lettre08.style.transform = "translateX(" + position + "px)";
alea(); lettre08.style.transform = lettre08.style.transform + "translateY(" + position + "px)";
alea(); lettre09.style.transform = "translateX(" + position + "px)";
alea(); lettre09.style.transform = lettre09.style.transform + "translateY(" + position + "px)";
alea(); lettre10.style.transform = "translateX(" + position + "px)";
alea(); lettre10.style.transform = lettre10.style.transform + "translateY(" + position + "px)";
alea(); lettre11.style.transform = "translateX(" + position + "px)";
alea(); lettre11.style.transform = lettre11.style.transform + "translateY(" + position + "px)";
alea(); lettre12.style.transform = "translateX(" + position + "px)";
alea(); lettre12.style.transform = lettre12.style.transform + "translateY(" + position + "px)";
}
- transform ne fonctionne que sur les navigateurs ayant dépréfixé cette propriété. C'est-à-dire Mozilla et Microsoft. Il faudrait aussi que je fasse des (-webkit/-o/-ms/-moz)-transform pour que ça marche chez tout le monde. Or, mon code est déjà ultra redondant.
- Précisément : c'est ultra redondant. Je pense que je pourrais systématiser ça en écrivant une seule fois ce que je veux faire, puis appliquer ça à chaque lettre (en sachant que les valeurs aléatoires doivent être différente pour chaque axe de chaque caractère), mais je ne sais pas du tout comment faire.
- La soupe de balises dans l'html est temporaire. J'aimerais utiliser lettering.js ou équivalent pour générer les span dynamiquement (ou invisiblement). lettering.js applique des class et non des id aux span, mais je n'arrive pas à les sélectionner après. getElementsByClass() ne semble pas fonctionner comme getElementById(). Idéalement en fait, j'aimerais même simplement sélectionner chaque enfant (un h1 a > span ou h1 a > * en CSS) et leur appliquer la transformation. Là encore, je ne vois pas comment faire.
Merci beaucoup,
Bon week-end,
Nicolas.