Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Autres

Shrink sticky header CSS @scroll-timeline animation

Code :

HTML


<body
<header>
<div>
<svg></svg>
<h1>CSS shrink sticky header</h1>
</div>
</header>	
<main>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</main>


CSS


body {
	
background:black;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
color:white;
--hauteur:10vh	
}
	
	
a{color:currentcolor}

@media (prefers-reduced-motion: reduce) {
	header >*{
		animation: 0s;
	}
}
	
	
@supports (animation-timeline: works) {
	
	
@scroll-timeline scroll-header {

time-range: 1s;
  }

@keyframes shrink {
		
to {
height:calc(var(--hauteur)/2);
padding:1rem;
font-size: calc(.25vw + 1em);
    }
  }

		
header >* {
height:var(--hauteur);
animation: shrink 1s both;
animation-timeline: scroll-header;
display:flex;
font-size: calc(.5vw + 1em);
padding: 2rem;
  }
}

header {
	
background-color:#448AFF;
position: fixed;/*bug position sticky*/
top: 0;
right: 0;
left: 0;


}

	
h1 {

flex:2;
display:grid;
place-items:center;
margin: 0;

	
}	

	
	
main {
	
max-width: 100ch;
margin: 10vh auto;
padding: 2rem;
	
}

p {

font-size: 1.25rem;
margin:4rem 0;
line-height: 2;
	
}

Support navigateurs :

Autre méthode sans animation

CSS @scroll-time

Vous rencontrez un problÚme avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.