<div class="scroll-perspective" id="scroll-perspective">
    <img src="https://images.unsplash.com/photo-1630359559738-34ef7281bbd0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1630359563592-c685967f83d7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1630359555185-87e1a286cf6b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1630359649585-bdaa7433d10f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1629907710551-e592df0ab1f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1629907730422-3303af15a34b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1629907912711-9845e6e762a9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1615266508000-63ac219ac378?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1615266895738-11f1371cd7e5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1615266508026-874e2c021320?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1615266895858-c243b139d5b9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1614633673914-0af3eae06970?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1614633836648-68ddff9f7553?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1608096275202-85fd2fc2e4d9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1608096275202-85fd2fc2e4d9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1607923432848-62f872d16daf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1599839575945-a9e5af0c3fa5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1598134493202-9a02529d86bb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1598134493136-7b63ebbd7b64?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1598133894008-61f7fdb8cc3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1583512603805-3cc6b41f3edb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1583512603806-077998240c7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1583512603784-a8e3ea8355b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=60" alt="">
</div>

body {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0,0,0, 0.01) 0 0 1px;
  background-color: #191f22;

  &::after {
    content: '';
    background-image: radial-gradient(#fff 2%, #fff0 10.2%);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 10px 10px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    z-index: -1;
  }
}

img {
  max-width: 100%;
  height: auto;
}

.scroll-perspective {
  column-count: 3;
  column-gap: 50px;
  font-size: 0;
  perspective: 50rem;
  padding: 40px 40px 0;
  max-width: 1080px;
  margin: auto;

  img {
    margin-bottom: 50px;
    border-radius: 6px;
  }
}

const perspective = document.getElementById('scroll-perspective');
  const images = perspective.querySelectorAll('img');
  const maxScrollSpeed = 5;
  let lastTime;
  let previousScrollPosition;
  let timer = 0;

  const animationOptions = {
    duration: 200,
    fill: 'forwards',
    iteration: 1
  }

  window.addEventListener('scroll', () => {
    const currentScrollPosition = window.pageYOffset;
    const currentTime = new Date().getTime();
    let scrollSpeed = 0;
    
    if (previousScrollPosition !== undefined && lastTime !== undefined) {
      const timeElapsed = currentTime - lastTime;
      scrollSpeed = Math.abs(currentScrollPosition - previousScrollPosition) / timeElapsed;
    }

    if (timer !== null) {
      clearTimeout(timer);        
    }

    timer = setTimeout(function() {
      images.forEach((image) => {
        image.animate([{
          transform: `rotateX(0deg)`
        }], animationOptions)
      });
    }, 200);

    let degrees = (scrollSpeed / maxScrollSpeed) * 5;

    if (degrees < 0) {
      degrees = 0;
    } else if (degrees > 5) {
      degrees = 5;
    }

    console.log(degrees);

    images.forEach((image) => {
      if (previousScrollPosition > window.scrollY) {
        // up
        image.animate([{
          transform: `rotateX(-${degrees}deg)`
        }], animationOptions)
      } else {
        // down
        image.animate([{
          transform: `rotateX(${degrees}deg)`
        }], animationOptions)
      }
    });

    previousScrollPosition = window.scrollY;
    lastTime = currentTime;
  })