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 :
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.