Forum : Slide-in effect

Bonjour à tous.tes,

je bloque sur effet slide-in en fin de page. Voici mon code :

Voici mon code CSS/Javascript :

CSS

body { position: relative; margin: 0; padding: 0; background-color: white; color: black; } body:before { position: absolute; content: ''; top: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(218,136,136,1) 0%, rgba(255,255,255,0.5066759980359331) 34%); transform-origin: 0 bottom 0; transform: scaleY(0); transition: .4s ease-out; } body.bc { color: white; transition: color .4s ease-out; z-index: -10; } body.bc:before { transform: scaleY(1); z-index: -10; }

JS/JQuery

window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight){ $('body').addClass('bc') } else{ $('body').removeClass('bc') } };

C'est déjà assez proche du résultat souhaité. Maintenant ce que j'aimerais faire c'est jouer sur le scroll, un peu comme un effet parallax. C'est à dire qu'au lieu de déclencher l'animation à la condition if qui vient chercher la butée du scroll en fin de page, j'aimerais que l'animation suive la barre de scroll sur les derniers centimètres de la page. Cela donnerait la sensation de pouvoir jouer avec le scroll pour intéragir avec la page.

Je ne fais que débuter sur JS ; Merci d'avance pour votre aide :)

Bonne journée !!

Slide-in effect

3 réponses