JAVASCRIPT

Par just_real, il y a 4 ans

Javascript

Bonjour,
Je souhaites m'inspirer d'un code javascript présent sur le net pour un effet de texte, mais je débute en javascript du coup :

Est ce que quelqu'un saurait me dire ce qu'il faut modifier sur le code suivant pour que l'anime démarre au chargement de la page sans s'arreter et non lorsque l'on survol la DIV .morph

Le html

<div class="morph">exemple de texte</div>

Le javascript

var morphChars = ['>','%','#','$','+','^','&','-','!']; function getRandomChar(){ return morphChars[Math.floor(Math.random()*morphChars.length)]; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } String.prototype.replaceAt=function(index, character) { return this.substr(0, index) + character + this.substr(index+character.length); } var morphInterval,originalText; $('.morph').on('mouseenter',function(){ originalText=$(this).text(); console.log('Hovering on a .morph element...'); var workWithThisText=$(this).text(); var intervalFunction=function(text){ console.log('Executing morphInterval()'); var charsToReplace=getRandomInt(0,text.length); var newText=text.replaceAt(getRandomInt(0,text.length-1), getRandomChar()); $('.morph').text(newText); } morphInterval=setInterval(function(){ intervalFunction(workWithThisText) },150); }); $('.morph').on('mouseleave',function(){ console.log('Stopped hovering on a .morph element...'); $('.morph').text(originalText); clearInterval(morphInterval); });

Merci à vous

8 réponses

just_real, il y a 4 ans

est-ce le mouseenter qu'il faut remplacer par un truc du genre window.onload ?

Soundboy39, il y a 4 ans

Bonjour,

Oui effectivement tu peux déjà essayer de remplacer le "$('.morph').on('mouseenter'," par un "$(document).ready("

Et tu pourra aussi retirer la partie "$('.morph').on('mouseleave',function(){"

just_real, il y a 4 ans

Bonsoir,
Merci à toi Soudboy39 ça fonctionne, par contre ça ne me prend plus uniquement le texte de la class .morph du coup ça me met un pavé de texte comprenant tous le code CSS affiché sur la page

Soundboy39, il y a 4 ans

Ah... oui en fait j'ai parlé un peu vite... dans ce cas là "this" devient le document complet donc c'est pas bon...

Il faut que tu remplace "originalText=$(this).text();" par "originalText=$('.morph').text();"
et "var workWithThisText=$(this).text();" par "var workWithThisText=$('.morph').text();"

just_real, il y a 4 ans

hello, un grand merci Soundboy39 ça fonctionne nickel !
bonne soirée à toi

Soundboy39, il y a 4 ans

OK de rien

N'hésite pas à passer le sujet au statut Résolu en sélectionnant le post qui t'a aidé ;-)

just_real, il y a 4 ans

C'est fait :)