Fija el header y anima sus propiedades al hacer scroll.

PHOTO

Wed Aug 16 2023 14:59:22 GMT+0000 (Coordinated Universal Time)

header {
  backdrop-filter:blur(5px);
  position:sticky;
  top:0px;
  animation: adjust-header linear both;
  animation-timeline: scroll();
  animation-range:0 200px;
}
@keyframes adjust-header{
  to {
    background:rgba(0,0,0,.3);
    font-size:12px;
    height:24px;
  }
}

COPY

Save snippets that work from anywhere online with our extensions

Comments

CSS

@rstringa

Responsive Typography in CSS | CodyHouse Break-Out Container -webkit-autofill Transicion de height 0 a auto CodePen Home Accordion - height "auto" with grid Animaciones CSS a través del Scroll sin necesidad de JavaScript. 100% nativo Fija el header y anima sus propiedades al hacer scroll. Card Hover 3d animation CSS color-mix Efecto sombra de imagen @starting-style / allow-discrete Form - User valid / invalid Interpolate size Tab filtering animation with view transitions / HTML, CSS Carmen Ansio - Ejemplos CSS Pure CSS Directional Hover Effect for Grouped Elements Backlight of Images in CSS

#animation-timeline

Fija el header y anima sus propiedades al hacer scroll.

header {
  backdrop-filter:blur(5px);
  position:sticky;
  top:0px;
  animation: adjust-header linear both;
  animation-timeline: scroll();
  animation-range:0 200px;
}
@keyframes adjust-header{
  to {
    background:rgba(0,0,0,.3);
    font-size:12px;
    height:24px;
  }
}

Fija el header y anima sus propiedades al hacer scroll.

Save snippets that work from anywhere online with our extensions

Comments

More like this

CSS

Browse more snippets >>

Fija el header y anima sus propiedades al hacer scroll.

Save snippets that work from anywhere online with our extensions

Comments

More like this

CSS

Browse more snippets >>

Embed code snippet