Problème sur 1 animation JS au scroll vers le haut (vers le bas ça marche :) )

WordPress :6.2
Statut : non résolu

Ce sujet contient 1 réponse, 2 participants et a été mis à jour pour la dernière fois par yann@my-little-com.com, le il y a 1 année et 2 mois.

Affichage de 1 message (sur 1 au total)

Auteur

Messages
14 juillet 2023 à 13 h 00 min #2457831
yann@my-little-com.com
Participant

Initié WordPress
8 contributions
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 :

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é.
```
<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>
```
```
.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%);
}
```
```
<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
Auteur

Messages

Affichage de 1 message (sur 1 au total)

Vous devez être connecté pour répondre à ce sujet.