Appliquer la classe WOW sur un élément
Résolu/Fermélamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 30 août 2022 à 21:48
- Appliquer la classe WOW sur un élément
- Element introuvable il n'existe plus dans l'ordinateur - Guide
- Desinstaller application sur pc - Guide
- Retrouver la liste des élèves d'une classe - Forum Réseaux sociaux
- Retrouver photo de classe gratuitement ✓ - Forum Vos droits sur internet
- Comment retrouver sa photo de classe ? - Forum Réseaux sociaux
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
26 août 2022 à 16:15
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 ?
26 août 2022 à 16:20
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
26 août 2022 à 17:06
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 question26 août 2022 à 17:25
Je ne comprends pas, j'ai respecté la démo me semble-t-il !????
https://wowjs.uk/
Encore merci pour ton aide.
LM
26 août 2022 à 19:48
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
26 août 2022 à 19:38
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
Modifié le 27 août 2022 à 07:53
Bonjour Pitet,
Là, ça devient trop compliqué pour moi :/
Je vais peut-être abandonner cette idée :(
Mais MERCI et bon week-end ;)
LM
30 août 2022 à 21:48
merci à vous.
Bonne soirée !