Problème animation durant le scroll
antho
-
DoctorHow -
DoctorHow -
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 :
Voici ce que j'ai essayé de faire pour déclencher le scroll en JS :
Et voici mon code html :
(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.
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.
A voir également:
- Problème animation durant le scroll
- Scroll lock - Forum Windows
- Touche scroll lock ✓ - Forum Excel
- Touche "scroll lock" - Forum Windows
- Dp animation maker - Télécharger - Animation
- A quoi sa sert le boutton arrêt defil ✓ - Forum Windows
2 réponses
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
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.
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.
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.
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 :/
Sous entendu... il faut que tu nous montre le code COMPLET de ta page ...