Appliquer la classe WOW sur un élément
Résolulamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je tente d'appliquer la classe WOW sans succès :/
Je vous laisse mon HTML :
</div><!-- /slider-wrapper --> <div id="blanc"> <div class="ms-left"> <div class="ms-section wow" id="left1"> Salut, comment ça va ? </div></div></div>
Mes CSS :
#blanc { height: 100%; background-color: green; } .ms-left .animated { height: 100% }
et le JS :
wow = new WOW( { animateClass: 'animated', offset: 100, callback: function(box) { console.log("WOW: animating <" + box.tagName.toLowerCase() + ">") } } ); wow.init(); document.getElementById('moar').onclick = function() { var section = document.createElement('section'); section.className = 'section--purple wow fadeInDown'; this.parentNode.insertBefore(section, this); };
ATTENTION, la réponse est peut-être que le script interfère avec celui d'un shuffleLetters dont voici le JS :
console.clear() $.fn.shuffleLetters = function(prop){ var options = $.extend({ "step" : 8, // How many times should the letters be changed "fps" : 25, // Frames Per Second "text" : "", // Use this text instead of the contents "callback" : function(){} // Run once the animation is complete },prop) return this.each(function(){ var el = $(this), str = ""; // Preventing parallel animations using a flag; if(el.data('animated')){ return true; } el.data('animated',true); if(options.text) { str = options.text.split(''); } else { str = el.text().split(''); } // The types array holds the type for each character; // Letters holds the positions of non-space characters; var types = [], letters = []; // Looping through all the chars of the string for(var i=0;i<str.length;i++){ var ch = str[i]; if(ch == " "){ types[i] = "space"; continue; } else if(/[a-z]/.test(ch)){ types[i] = "lowerLetter"; } else if(/[A-Z]/.test(ch)){ types[i] = "upperLetter"; } else { types[i] = "symbol"; } letters.push(i); } el.html(""); // Self executing named function expression: (function shuffle(start){ // This code is run options.fps times per second // and updates the contents of the page element var i, len = letters.length, strCopy = str.slice(0); // Fresh copy of the string if(start>len){ // The animation is complete. Updating the // flag and triggering the callback; el.data('animated',false); options.callback(el); return; } // All the work gets done here for(i=Math.max(start,0); i < len; i++){ // The start argument and options.step limit // the characters we will be working on at once if( i < start+options.step){ // Generate a random character at thsi position strCopy[letters[i]] = randomChar(types[letters[i]]); } else { strCopy[letters[i]] = ""; } } el.text(strCopy.join("")); setTimeout(function(){ shuffle(start+1); },1000/options.fps); })(-options.step); }); }; function randomChar(type){ var pool = ""; if (type == "lowerLetter"){ pool = "abcdefghijklmnopqrstuvwxyz0123456789"; } else if (type == "upperLetter"){ pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; } else if (type == "symbol"){ pool = ",.?/\\(^)![]{}*&^%$#'\""; } var arr = pool.split(''); return arr[Math.floor(Math.random()*arr.length)]; } var tabBolo = ["Ça va bien et toi ?", "Ben nickel !", "Pamplemousse...", "Pas mieux !", "Mais encore ?"]; var newShuffleLetter = function(tabBolo, j, $left1) { console.log(j) $left1.shuffleLetters({ "text": tabBolo[j] }) j++; if (j<tabBolo.length) setTimeout(function(){ newShuffleLetter(tabBolo, j, $left1) }, 4000); } var $left1 = $("#left1"); // Shuffle the contents of container $left1.shuffleLetters(); setTimeout(function(){ newShuffleLetter(tabBolo, 0, $left1) }, 4000);
Si tel est le cas, comment faire ?
Merci beaucoup,
LM
Macintosh / Chrome 104.0.0.0
- Jason a réalisé un photo-montage pour tromper et amuser ses camarades. il a modifié un élément sur une photo de neil armstrong marchant sur la lune. lequel ?
- Google photo - Télécharger - Albums photo
- Montage vidéo photo musique gratuit sur pc - Guide
- Google maps photo maison - Guide
- Photo filtre 7 gratuit - Télécharger - Retouche d'image
- Partage photo - Guide
8 réponses
Ok je comprends mieux. Il ne faut pas que tu utilises wowjs ou aos pour déclencher le shuffleLetters, il faut modifier le code existant qui est responsable du déclenchement.
Le shuffleLetters est initialisé en appelant la fonction newShuffleLetter() 4 secondes après le chargement de la page (cf. les 3 dernières lignes de ton code javascript).
Pour initialiser le shuffleLetters après un défilement de la page, il faut remplacer ce code en ajoutant un écouteur sur l'événement scroll de l'objet window (via addEventLister() en js, ou via scroll() avec jQuery), puis comparer la position de l'élément #left1 avec le viewport (la partie visible de la page) afin d'initialiser le shuffleLetters lorsqu'il est visible.
Un exemple avec plus d'explication : https://usefulangle.com/post/113/javascript-detecting-element-visible-during-scroll
Bonjour,
1 - vide bien le cache de ton navigateur
2 - ouvre la console (javascript) de ton navigateur et recharge ta page
3 - regarde si il y a des messages dans la console.
PS: Par contre je ne vois pas en quoi ta question concerne le css .. ne serait-ce pas plutôt un souci de JS ?
Merci Jordane.
JS ? peut-être... je suis perdu. :(
Pour la console, je ne l'ai jamais utilisée. Je vais chercher.
Que dois-je voir ? Comment ?
Encore merci,
LM
mais en fait.. c'est ça que tu appelles ta class WOW
WOW( { animateClass: 'animated', offset: 100, callback: function(box) { console.log("WOW: animating <" + box.tagName.toLowerCase() + ">") }
Il ne faut pas la faire en JS .. mais directement la mettre dans ton CSS
wow{ animateClass:'animated'; offset: 100; }
Tu sembles mélanger les "class" du CSS .. et les OBJETS (class) en Javascript
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionJe ne comprends pas, j'ai respecté la démo me semble-t-il !????
https://wowjs.uk/
Encore merci pour ton aide.
LM
ah..mais c'est juste un plugin ...
Donc, il suffit de faire ce qui est suggéré dans la documentation.
Et comme je te l'ai indiqué, bien vidé le cache de ton navigateur après chaque modification de js ou de css dans ton code.
Et puis, il reste à vérifier dans la console si tu n'as pas d'autres erreurs javascript. https://www.google.com/search?q=console+javascript
Bonjour,
Je ne comprends pas bien ce que tu veux faire avec ta fonction onclick pour ajouter une classe, tu veux déclencher une animation lors du clic sur l'élément id="moar" ?
A la base wowjs est utilisé pour déclencher des animations lors du défilement dans la page (scroll) et il suffit d'appliquer les classes sur tes éléments html (seul le new WOW().init(); est nécessaire coté js).
Au passage, wowjs est temporairement déprécié en faveur de AOS (Animate On Scroll) : https://github.com/michalsnik/aos
Bonsoir Pitet,
Merci pour ta réponse.
Je désire juste que le shuffleLetters se déclenche lorsqu'il est visible.
Merci pour l'info sur le JS nécessaire ;)
Je désire appliquer "wow" (ou AOS) sur
.ms-left .animated { height: 100% }
dont le HTML est
</div><!-- /slider-wrapper --> <div id="blanc"> <div class="ms-left"> <div class="ms-section wow" id="left1"> Salut, comment ça va ? </div></div></div>
Je vais jeter un œil sur AOS.
Merci pour les infos.
Bon week-end,
LM