Problème animation durant le scroll

Fermé
antho - 13 avril 2022 à 15:57
 DoctorHow - 15 avril 2022 à 20:26
Bonjour,

Alors voilà, j'ai un petit problème, j'aimerais inclure dans mon code des animations, donc pour ça j'ai fais appel à wow.js et a animate.css sauf que l'animation se déclenche mais elle n'attend pas le scroll de la page pour se déclencher :/

Voici mon link css pour la animate :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>


Voici ce que j'ai essayé de faire pour déclencher le scroll en JS :
<script src="js/wow.js"></script>
    <script>
      $(document).ready(function(){
        new WOW().init();
      });
    </script>


Et voici mon code html :
<div class="wow fadeInLeft col-lg-6 col-sm-6">

                                            <h3 class="sec_desc">TEST :</h3>
                                            <img src="images/avv.png">
                </div>

(Sachant que pour je ne sais quelle raison, l'animation ne fonctionne pas si je ne définis pas un "animation-duration")
Je vous remercie d'avance pour vos réponses.

2 réponses

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
13 avril 2022 à 17:08
Bonjour,

Ne sachant pas exactement ce que contient ta page .. on peut supposer que tu as mis le JS AVANT ton html ... ( alors qu'il serait largement préférable de le mettre à la fin de ta page, juste avant le </body> )
Sachant que la documentation explique que

Asynchronous content support
In IE 10+, Chrome 18+ and Firefox 14+, animations will be automatically triggered for any DOM nodes you add after calling wow.init(). If you do not like that, you can disable this by setting live to false.

If you want to support older browsers (e.g. IE9+), as a fallback, you can call the wow.sync() method after you have added new DOM elements to animate (but live should still be set to true). Calling wow.sync() has no side effects.

0
Bonjour,

Je vous remercie déjà de votre réponse, mais même avec cette manip, l'animation n'attend pas le scroll pour s'exécuter :/
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > antho
14 avril 2022 à 10:41
Comme je te l'ai déjà dit :

Ne sachant pas exactement ce que contient ta page

Sous entendu... il faut que tu nous montre le code COMPLET de ta page ...
0
Salut,
vous dites:
Sachant que pour je ne sais quelle raison, l'animation ne fonctionne pas si je ne définis pas un "animation-duration"

Simplement parce que en utilisant une animation avec transition en CSS il faut indiquer une durée sinon c'est une animation de 0s = pas d'animation, source:

https://developer.mozilla.org/fr/docs/Web/CSS/animation-duration

Avec @keyframe c'est pareil il faut indiquer une durée(qui peut être infinie) sinon comment faire pour régler/changer la vitesse? Les animations seraient assez limitées si elles devaient avoir toutes la même durée.
0