Discussion :

[el_debutanti]

Bonjour,
Je suis tombé sur cet excellent tuto de NoSmoking
https://nosmoking.developpez.com/dem...arque-rtl.html
Mais j'aimerais que l'animation se lance uniquement lorsqu'on arrive dans une section.
Cela me semble très compliqué, je n'ai aucune idée de comment faire.
Merci pour votre aide,
ED

[darkstar123456]

Bonjour,

Personnellement, j'utilise souvent WoWJS (https://wowjs.uk/)

Il suffit alors d'ajouter la class wow à l'élement que vous voulez animer.
Quand il sera visible, ça ajoutera la classe animated, il suffit donc de changer le sélecteur de CSS de votre animation pour ne démarrer que si cette classe existe

Si je reprends le code du tuto de @NoSmoking, on passe de :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
/* le bloc défilant */
.marquee-rtl > :first-child {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl 15s infinite linear;
}

A :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
/* le bloc défilant */
.marquee-rtl.animated > :first-child {                  /* on ajoute la classe .animated */
  display: inline-block;                
  padding-right: 2em;                 
  padding-left: 100%;                  
  white-space: nowrap;
  animation: defilement-rtl 15s infinite linear;
}

et côté HTML, on ajoute également la class (mais wow cette fois-ci) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!-- le conteneur fenêtre -->
<div class="marquee-rtl wow">
    <!-- le contenu défilant -->
    <div>Le message que l'on veut voir défilé horizontalement...</div>
</div>

Et si vous voulez savoir comment ça marche, ce n'est pas si compliqué.
Pour chaque class wow trouvé, il regarde si la position top est plus haut que la hauteur du scroll + hauteur de l'écran (qui correspond à la position basse de l'écran à l'instant T).
Et si c'est le cas, il ajoute la class animated.

Y'a quelques options en plus qui peuvent être utiles et c'est super simple à utiliser donc c'est pour ça que je propose cette libraire plutôt qu'un code from scratch

[el_debutanti]

MERCI BEAUCOUP darkstar123456.
Je vous tiens au courant ASAP (je ne peux pas faire de test actuellement).
Très bon après-midi

[Doksuri]

salut, une autre approche native serait d'utiliser les intersection0bserver developer.mozilla.org/fr/docs/Web/API/Intersection_Observer_API

quand ton element intersecte, tu lui ajoute une classe qui declanche l'animation css

[el_debutanti]

Merci beaucoup Doksuri, mais c'est trop compliqué pour un amateur comme moi
Je vais resté sur la lib WOW. Merci darkstar123456
Avant de tester ce dernier, je n'arrive pas à avoir le texte qui défile du tuto de NoSmoking.
Pourtant, tout est respecté. J'y arrive avec un codepen du site (jreaux62), mais comme j'aime bien comprendre, je vais rester sur celui de NoSmoking
Bonne soirée,
ED

[el_debutanti]

ci-joint le codepen de ma page.
https://codepen.io/herde2/pen/PoQaPvV
Bonne soirée !

[NoSmoking]

Bonjour,

Je suis tombé sur cet excellent tuto de NoSmoking

merci mais il y avait une erreur , que je viens de corriger, à savoir qu'il fallait lire animation-duration: 15s et non animation-delay: 15s, toutes mes confuses