<nav>
  <h1>Jhey</h1>
  <a href="https://twitter.com/intent/follow?screen_name=jh3yy">
    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
  </a>
</nav>
<ul>
  <li>
    <h2>CSS Scroll<br>Animations</h2>
    <img src="https://picsum.photos/400/400?random=1" alt="">
  </li>
  <li>
    <h2>Check out this rad demo</h2>
    <img src="https://picsum.photos/400/400?random=2" alt="">
  </li>
  <li>
    <h2>All CSS</h2>
    <img src="https://picsum.photos/400/400?random=3" alt="">
  </li>
  <li>
    <h2>The same keyframes for every image</h2>
    <img src="https://picsum.photos/400/400?random=4" alt="">
  </li>
  <li>
    <h2>Use a ViewTimeline</h2>
    <img src="https://picsum.photos/400/400?random=5" alt="">
  </li>
  <li>
    <h2>With the inline axis</h2>
    <img src="https://picsum.photos/400/400?random=6" alt="">
  </li>
  <li>
    <h2>Use a keyframes set</h2>
    <img src="https://picsum.photos/400/400?random=7" alt="">
  </li>
  <li>
    <h2>That rotates its subject</h2>
    <img src="https://picsum.photos/400/400?random=8" alt="">
  </li>
  <li>
    <h2>Alternate the transform-origin</h2>
    <img src="https://picsum.photos/400/400?random=9" alt="">
  </li>
  <li>
    <h2>Using :nth-of-type(even)</h2>
    <img src="https://picsum.photos/400/400?random=10" alt="">
  </li>
  <li>
    <h2>That's it!</h2>
   </li>
</ul>
* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow-y: hidden;
}

ul {
  display: flex;
  list-style-type: none;
  padding: 0 10vw;
  margin: 0;
  height: 100%;
}

nav {
  padding: 0 2rem;
  position: fixed;
  width: 100vh;
  color: white;
  background: hsl(0 0% 0% / 0.65);
  backdrop-filter: blur(4px);
  left: 0;
  bottom: 0;
  transform-origin: 0 100%;
  transform: rotate(-90deg) translateY(100%);
  z-index: 2;
}

nav a {
  position: absolute;
  left: 2rem;
  top: 50%;
  translate: 0 -50%;
}

nav svg {
  width: 1.75rem;
  rotate: 90deg;
  fill: white;
}

h1 {
  margin: 0;
  text-transform: uppercase;
  text-align: right;
  font-weight: 100;
}

li {
  width: 80vw;
  height: 100%;
  position: relative;
  display: grid;
  align-items: start;
  padding: 1rem 0;
  overflow: hidden;
}

li:nth-of-type(even) {
  align-items: end;
}

img {
  position: absolute;
  right: 10%;
  top: 50%;
  translate: 0% -50%;
  z-index: -1;
  width: 70vmin;
  aspect-ratio: 1;
  transform-origin: 300% 50%;
}

@media(prefers-reduced-motion: no-preference) {
  li {
    view-timeline: --item;
    view-timeline-axis: inline;
  }
  img {
    animation: fly-by both linear;
    animation-timeline: --item;
  }
}

@keyframes fly-by {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

li:nth-of-type(even) img {
/*   animation-direction: reverse; */
  transform-origin: -300% 50%;
}

h2 {
  font-size: clamp(2rem, 4vw + 1rem, 10rem);
  margin: 0;
  text-transform: uppercase;
  font-weight: 200;
  max-width: 50%;
}

// // https://www.awwwards.com/inspiration/horizontal-scrolling-interaction-stooff-interior-projects
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.