Simple images parallax

by Julien Roche

HTML

<img src="https://images.unsplash.com/photo-1566345984367-fa2ba5cedc17?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<img src="https://images.unsplash.com/photo-1543722530-d2c3201371e7?q=80&w=1474&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<img src="https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<img src="https://images.unsplash.com/photo-1502134249126-9f3755a50d78?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<img src="https://images.unsplash.com/photo-1614121181207-4b6c334d353d?q=80&w=1476&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />

CSS

img {
  aspect-ratio: 16/9;
  display: block;
  margin-bottom: 2rem;
  object-fit: cover;
  animation: --parallax linear both;
  animation-timeline: view(block 10% 10%);
  width: 50rem;
}

@keyframes --parallax {
  from {
    object-position: 0 100%;
  }

  to {
    object-position: 0 0;
  }
}