Bonjour,

J'ai actuellement sur ma page un header fixe auquel j'ai appliqué en css un z-index: 1; et une section à laquelle j'ai appliqué z-index: 2; 

J'aimerais, lorsque je scroll et que la section recouvre le header que celui-ci s'assombrisse ou devienne flou.

Le problème est que je n'ai aucune idée de comment faire.

Est-ce que quelqu'un peu m'aider ?

Salut,

Il te faut du  javascript. L'idée est là https://github.com/EmmanuelBeziat/izzi-sticky sauf qu'à la place du sticky, il te suffit de mettre des propriétés pour l'assombrir et / ou le flouter.

pour ma part je joue avec de la transparence et un fond sombre sur le main page comme ça quand ton header passe dessus il en ressort bien plus sombre site

-
Edité par GuillaumeBo1 21 avril 2018 à 18:32:31

En fait je voudrais que le Header s'assombrisse progressivement lorsque la main page passe par dessus

Il te faut donc du javascript.

Du reste, donne-nous un peu plus de détails (notamment, ton code html / css), parce que là on ne sait pas bien ce que tu as déjà fait.

-
Edité par EmmanuelBeziat 21 avril 2018 à 18:37:57

Donc animation possible en CSS3 version 4 mais en attendant ça sortie JS ou JQuery après je ne suis pas fana du JS mais alors pas du tout donc je ne risque pas de t'être d'une grande aide mais en gros tu dois récupérer le scroll de ta page et plus tu descends plus tu assombris jusqu'à atteindre la couleur que tu souhaites. voici la fonction qui sert de déclencheur <div onscroll="maFonction()"></div> 

-
Edité par GuillaumeBo1 21 avril 2018 à 18:44:32

On n'utilise plus trop les attributs d'évenements (comme onclick="" ou ici onscroll="") ; ça se gère directement dans le JS avec un addEventListener().

Et comme on le disait ailleurs, pas de CSS4 prévu.

comme tu as pus voir j'ai mis CCS3 version 4 X) mais vue la tonne d'ajout c'est l'équivalent d'une toute nouvelle version franchement. ça fou a la poubelle le .less sass et compagnie d'après ce que j'ai vue

Ouhla non. Entre les mixins, l'imbrication, les fonctions, les inclusions, les extensions de classes et tout le reste… Il y a beaucoup de choses que le CSS ne saura pas faire par rapport à un préprocesseur.

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Mauvais forum

Le sujet est déplacé dans le forum approprié : Javascript