Modifications au scroll

Bonjour,
je développe un site dans lequel j'aimerais faire une modification simple au scroll :
rendre une image de visible à transparente( opacity : 1 => opacity: 0) au fur et à mesure que l'on scrolle.
Mon souhait serait que la modification se fasse de façon progressive au fur et à mesure du scroll, sans étapes.
Auriez-vous une solution à me proposer?

Un grand merci d'avance pour votre aide, si la question a déjà été posée merci pour le lien vers la réponse.
Modifié par Ayzs (22 Dec 2021 - 10:13)

Salut,

Pour ce qui est du scroll tu peux gérer cela avec l'évènement scroll !
et pour changer l'opacité d'un élement tu peux utiliser la prop style opacity

Pour combiner les deux il va falloit faire quelques IF dans ton event scroll car il va falloir définir à partir de combien de pixel de hauteur l'opacité atteint 1

Pour ce qui est des liens tu as des milliers d'exemple sur stackoverflow

suffit de taper ça sur google : 'javascript change opacity on scroll'
Modifié par JENCAL (22 Dec 2021 - 10:35)

Yo Jencal,
je pense que ta réponse va pouvoir bien m'aider,
merci.

Tu peux voir un exemple ici un peu moche mais fonctionnel

http://jsfiddle.net/ftv307jq/
Modifié par JENCAL (22 Dec 2021 - 11:23)

J'aurais dû le préciser mais je cherche une solution en pur Javascript, tu crois que c'est assez simple à mettre en place?

En tous cas merci pour tes réponses, c'est cool.

Bonjour,
c'est l'époque des cadeaux, en pur JavaScript et très simple, tu as ceci, que j'ai installé pour faire apparaître un fond blanc sous un menu, au scroll de la page. Il te suffit d'inverser ce que j'ai mis (mettre opacity à 0, et changer éventuellement la couleur du background). "accueil" chez moi, c'est la div de mon bandeau menu. Le moment où entre en action le script au scroll, tu vas le changer toi-même, si tu connais un peu js

 	
	const checkpoint=100;window.addEventListener("scroll",()=>{const currentScroll=window.pageYOffset;if(currentScroll<=checkpoint){background=""-currentScroll/checkpoint}else{background="white";opacity=1}
document.querySelector(".accueil").style.background=background;document.querySelector(".accueil").style.opacity=opacity}); 

Maintenant, sans étape et progressif, il faut y ajouter une simple transition sur la div.

Bonjour Bongota et merci d'être venu m'aider.

J'ai essayé d'adapter ton code mais je n'ai pas de résultat.
Concernant mes connaissances en JS elles sont limitées mais je suppose que le moment où entre en action le script au scroll correspond au checkpoint?

Voici comment j'ai essayé d'adapter ton code, mais de toute évidence je n'ai pas su :

const checkpoint=100;window.addEventListener("scroll",()=>{const currentScroll=window.pageYOffset;if(currentScroll<=checkpoint){opacity=""-currentScroll/checkpoint}else{background=1;opacity=0}

   document.getElementById("landing-bckgrnd").style.opacity=background;
   document.getElementById("landing-bckgrnd").style.opacity=opacity;})

J'ai ciblé mon image( qui fait la hauteur de la page) avec son ID et lui ai attribué une transition ;
le but étant d'arriver à la rendre progressivement transparente au fur et à mesure du scroll,
passant d'une opacity: 1 en haut de page à 0 en bas de page.

Il faudrait aussi voir le code html/css de la partie correspondante pour mieux comprendre.

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    <img id="landing-bckgrnd" src="assets/medias/lndng-bck.jpg">
  </div>
  <div>Contient le contenu principal du site</div>
</div>

Je viens d'effectuer un essai rapide sur une page avec ton code (uniquement avec <img id="landing-bckgrnd" src="une_image.jpg"> pour le html et aussi pour le css. J'ai enlevé pour cet essai les deux class qui entourent cette image.
J'ai ajouté sur le css

transition-duration:4s;
    	transition-delay:0.1s;
    	opacity:1;

et ça fonctionne, ton image s'en va doucement, suivant la valeur de transition. Il faut aussi que tu saches qu'avec cette méthode, elle ne revient pas, quand on remonte sur la page. Ça, c'est un peu gênant Il faut un autre JavaScript pour le faire.
Si ça ne fonctionne pas chez toi, c'est sans doute à cause d'un mauvais ciblage, à cause des deux class d'avant.
Modifié par Bongota (22 Dec 2021 - 15:52)

Erreur de ma part, je parlais de TON fichier, sur lequel tu dois mettre opacity à 1 sur

{opacity="1"-currentScroll/checkpoint}[code=javascript]

Et dans ce cas, l'image apparaît de nouveau quand on remonte sur la page.
Je me demandais pourquoi ça fonctionnait chez moi et pas avec ton code.
Je suppose que tu veux faire un site avec une image background d'accueil qui disparaît au scroll et fait apparaître du texte ? Je garde l'idée.

Super merci Bongota, j'ai pas le temps d'essayer ça ce soir mais je le sens bien pour le coup.

L'idée c'est qu'en fait mon client produit des luminaires et je voudrais qu'en scrollant on voit la lampe s'allumer( qui était cachée par une photo de la lampe éteinte), dans la portion de code que je t'ai donné j'avais enlevé l'image de la lampe allumée pour simplifier, du coup il y a deux images dans la div "parallax__layer parallax__layer--back".

Je te tiens au courant demain, merci encore et aussi à Jencal.
Modifié par Ayzs (22 Dec 2021 - 17:04)