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


Soundboy39
Réponse acceptée

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(){"

Soundboy39
Réponse acceptée

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

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

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

Le fameux effet en question c'est celui ci : https://codepen.io/Alchemyistic/pen/rrxQgX

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

OK de rien

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

C'est fait :)