[PARALLAXE] Faire un deplacement d'objet en fonction du scroll

Bonjour à tous,

Je créé ce post car je n'arrive pas à trouver sur internet la meilleure façon d'obtenir ce que je cherche à faire. J'essaye de faire un parallaxe qui modifie la position d'un objet en fonction du scroll de la page. J'ai réussi à trouver un moyen détourner de le faire mais je ne pense pas que ce soit la plus optimale et elle ne correspond pas exactement à ce que je veux faire.

Voici mon css :

#section-1-abeille.scroll-1{
	position: fixed;
	left: 43vw;
	top: 15vw;
	width: 7vw;
	height: 7vw;
}

#section-1-abeille.scroll-2{
	left: 35vw;
	top: 20vw;
}

#section-1-abeille.scroll-3{
	left: 22vw;
	top: 24vw;
}

#section-1-abeille.scroll-4{
	left: 18vw;
	top: 22vw;
}

Voici mon js

const abeille = document.querySelector('#section-1-abeille');

window.addEventListener('scroll', () => {
	if(window.scrollY > 5){
		abeille.classList.add('scroll-1');
	} else {
		abeille.classList.remove('scroll-1');
	}
});

window.addEventListener('scroll', () => {
	if(window.scrollY > 10){
		abeille.classList.add('scroll-2');
	} else {
		abeille.classList.remove('scroll-2');
	}
});

window.addEventListener('scroll', () => {
	if(window.scrollY > 15){
		abeille.classList.add('scroll-3');
	} else {
		abeille.classList.remove('scroll-3');
	}
});

window.addEventListener('scroll', () => {
	if(window.scrollY > 20){
		abeille.classList.add('scroll-4');
	} else {
		abeille.classList.remove('scroll-4');
	}
});

Avec cette méthode le problème est que ce n'est pas fluide du tout et que ça me prendrait des heures à réaliser.

Avez-vous une autre idée ou un moyen de simplifier ma méthode svp ?

Je vous remercie d'avance pour toute aide qui me sera apporté !

Un super exemple qui utilise la position du scroll (calculé en JS) dans une variable CSS et qui permet d'animer certains éléments.
Modifié par Yordi (30 Apr 2019 - 09:10)