.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1px;
  position: fixed;
  inset: 0;
  > * {
    background: black;
    animation: blocks linear;
    animation-timeline: --my-scroller;
  }
}
html {
  background-image: url("https://assets.codepen.io/3/johnny.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: block;
}
@keyframes blocks {
  100% {
    scale: 0;
  }
}

body {
  height: 200dvh;
}