Animation JS au scroll vers le haut (vers le bas ça marche ! :) )
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:
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:
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:
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
