Discussion :

[yannquere]

Bonjour à tous,

Je suis en train de développer un site sur lequel je souhaite mettre en place une animation des titres au scroll. voici le lien de ma page test :
https://mlc.agence-communication-brest.fr/test/


Au scroll vers le bas les 2 lignes de titres se séparent bien pour aller chacune dans leur direction, au moment ou elles apparaissent visibles à l’écran.
C’est quand on scroll vers le haut que réside mon problème. Le dernier titre visible reprend bien sa position initiale, lorsqu’on arrive à sa hauteur, mais cela remet aussi en position initiale tous les titres qui sont plus haut sur la page et donc non visibles.
Je souhaiterais que chaque titre reprenne sa place uniquement quand on remonte à sa hauteur. Je pense qu’il ne manque pas grand chose, mais je suis très mauvais en JS et j’ai atteint mes limites techniques là-dessus ! Est-ce que quelqu’un aurait une petite idée de comment arriver à mes fins svp ? 🙂

Voici les codes HTML, CSS et JS que j’ai généré.

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
<div class="toto ">
  <span class="titrehaut">Lorem ipsum</span><br>
  <span class="titrebas">dolor sit amet !</span>
</div>
 
<div class="toto ">
  <span class="titrehaut">Lorem ipsum</span><br>
  <span class="titrebas">dolor sit amet !</span>
</div>
 
<div class="toto ">
  <span class="titrehaut">Lorem ipsum</span><br>
  <span class="titrebas">dolor sit amet !</span>
</div>

Code css :

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
.toto {
  overflow: visible;
}
 
.toto span {
  display: inline-block;
  vertical-align: middle;
  transition: transform 3.5s;
}
 
.titrehaut.translate-right {
  transform: translateX(100%);
}
 
.titrebas.translate-left {
  transform: translateX(-100%);
}

Code javascript :

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
36
37
38
39
40
41
<script>
var lastScrollPos = window.pageYOffset;
 
window.addEventListener('scroll', function() {
  var titresHaut = document.querySelectorAll('.titrehaut');
  var titresBas = document.querySelectorAll('.titrebas');
  var currentScrollPos = window.pageYOffset;
 
  if (currentScrollPos > lastScrollPos) {
    // Scroll vers le bas
    titresHaut.forEach(function(element) {
      var rect = element.getBoundingClientRect();
      if (rect.top < window.innerHeight && rect.bottom >= 0) {
        element.classList.add('translate-right');
      } else {
        element.classList.remove('translate-right');
      }
    });
 
    titresBas.forEach(function(element) {
      var rect = element.getBoundingClientRect();
      if (rect.top < window.innerHeight && rect.bottom >= 0) {
        element.classList.add('translate-left');
      } else {
        element.classList.remove('translate-left');
      }
    });
  } else {
    // Scroll vers le haut
    titresHaut.forEach(function(element) {
              element.classList.remove('translate-right');
    });
 
    titresBas.forEach(function(element) {
      element.classList.remove('translate-left');
    });
  }
 
  lastScrollPos = currentScrollPos;
});
</script>

Un grand grand merci pour votre aide !



Yann

[Archimède]

Salut, en fait dans ton else, tu ne gères que si tu te déplaces vers le haut et lorsque tes textes sont en dehors de la page, ils sont déjà revenus dans leur position initiale et le problème vient de là...
Donc dans le principe, il faudrait que tu fasses un truc comme ça. A toi de simplifier ((optimiser le code...)

Code javascript :

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
 
 else {
            // Scroll vers le haut
 
              titresHaut.forEach(function(element) {
                  var rect = element.getBoundingClientRect();
                  if (rect.top < window.innerHeight && rect.bottom >= 0){
                     element.classList.remove('translate-right');
                  }
                  else{
                    element.classList.add('translate-right');
                  }
              });
 
              titresBas.forEach(function(element) {
                var rect = element.getBoundingClientRect();
                if (rect.top < window.innerHeight && rect.bottom >= 0){
                   element.classList.remove('translate-left');
                }
                else{
                  element.classList.add('translate-left');
                }
              });
 
          }
          lastScrollPos = currentScrollPos;
        });

[yannquere]

Merci Archimède ! ça correspond exactement à ce que je voulais faire !!!
Une énorme merci pour ton aide précieuse !

bon week-end !