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

[el_debutanti]

Merci NoSmoking

[el_debutanti]

reBonjour,
Avec Wow, en respectant le code de NoSmoking et darkstar 123456 (encore merci), le texte ne bouge plus, mais le conteneur... si.
Ce qui n'est pas grave. Mais le conteneur s'anime avant de s'afficher à l'écran.

D'où cela peut-il venir ?
Merci,
ED

[darkstar123456]

Hello,

Pourtant, si je repars de votre Codepen, que je corrige le transition-delay en transition-duration, que j'ajoute WOW.js et que je modifie la CSS comme décrit dans ma première réponse; ça fonctionne

Voici mon test : https://codepen.io/DarkStar123456/pe...O?editors=0010

J'ai retiré animation-name: defilement-rtl; et j'ai ajouté la CSS pour qu'elle se déclenche uniquement avec la classe .animated :

Code css :

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

1
2
3
.marquee-rtl.animated > :first-child {
  animation-name: defilement-rtl;  
}

Ne pas oublier d'initialiser WOW.js comme indiqué dans la doc :

Code :

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

https://wowjs.uk/docs.html

[el_debutanti]

Hello
Dans ton codepen, le bloc n'est plus animé.
Voici ce que j'ai comme script avant la fin de mon body :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
          <script src="js/dist/wow.js"></script>
          <script src="js/dist/wow.min.js"></script>
              <script>
              new WOW().init();
              </script>
  <script>
    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);
    };
  </script>

AI-je bon ?
Merci pour ton temps et ta patience.

[el_debutanti]

Le bloc ne bouge plus, mais la phrase commence quand le bloc apparaît sur l'écran, c'est ça

[el_debutanti]

SUPER. Et en vertical ? Si ce n'est pas abusé... en partant du même principe :
Les CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.marque-ver .animated {
  position:relative;
  max-width: 30em;
  height:6em;
  margin: 2em auto;
  border: 10px solid #F0F0FF;
  overflow: hidden;
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}
.marque-ver > div {
  position:relative;
  padding: 2em;
  padding-top: 6em; /* meme que height du parent */
  animation: defilement-ver 10s linear;
  cursor: pointer;
}
.marque-ver:hover > div {
  animation-play-state: paused;
}
.msg {
  font-size: 1.5em;
  line-height: 1.5em;
}
.msg:first-letter {
  font-weight: 700;
  color: #F00;
}
@keyframes defilement-ver {
  0% {
    transform: translate3d(0,-100%,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}

et le HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
      <div class="marque-ver wow">
        <div class="msg">Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</div>
      </div>
 
      <p>Exemple 2 : Le texte à afficher est moins long que la hauteur de la fenêtre de défilement.</p>
      <div class="marque-ver wow">
        <div class="msg">Texte défilant court</div>
      </div>
</div>

Je ne dois pas être loin
Merci à vous.