article.container
  section.year.year--1
    .year__title
      h1 1944 - 1959
    .year__images
      .year__image.year__image--1
        a(href="#1")
          img(
          src="https://www.edn.com/wp-content/uploads/media-1181260-cobl-hopper.jpg"
        )
      .year__image.year__image--2
        a(href="#2")
          img(
          src="https://am24.mediaite.com/tms/cnt/uploads/2018/02/Grace-Hopper-UNIVAC-1200x800.jpg"
        )
      .year__image.year__image--3
        a(href="#3")
          img(src="https://preview.redd.it/ulu2vi4ni4w41.jpg?width=640&crop=smart&auto=webp&s=7ce21a9b3fc73dc23c9475b700592bc6aceaf07b"
        )
View Compiled
@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
* {
  font-family: Lora, serif;
}

body {
  margin: 0;
  background: #d8d8d8;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  height: max-content;
  clip-path: inset(0 0 0 0);
}

h1 {
  font-size: calc(100vw / 24 * 2);
  text-align: center;
  margin: 0 auto;
  font-weight: 400;
}

.container {
  --scroll: 0;
  --x-translate: 0;
  --y-translate: 0;
  perspective: 1000px;
  perspective-origin: center;
}

.year {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transform-style: preserve-3d;
  width: 100%;
  height: 150vh;
  pointer-events: none;
  &__title {
    position: absolute;
    top: 60vh;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    h1 {
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      text-align: center;
      @media (hover: hover) {
        transition: transform 0.4s ease-out;
      }
      transform: matrix3d(
        1,
        0,
        0,
        0,
        0,
        1,
        0,
        0,
        0,
        0,
        1,
        0,
        0,
        0,
        calc(var(--scroll) * 4 + 1),
        1
      );
      transform-origin: bottom right;
    }
  }
  &__images {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: 40vh;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    height: 200vh;
  }
  &__image {
    transform-origin: bottom right;
    @media (hover: hover) {
      transition: transform 0.4s ease-out;
    }
    a {
      pointer-events: all;
      display: block;
      width: 32vw;
      height: 32vw;
      @media (max-width: 750px) {
      width: 48vw;
      height: 48vw; 
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &--1 {
      --perspective-start: -400;
      @media (max-width: 750px) {
        --perspective-start: -200;
      }
   }
    &--2 {
      margin-top: 100px;
      --perspective-start: -1200;
      @media (max-width: 750px) {
        --perspective-start: -700;
      }
    }
    &--3 {
      --perspective-start: -700;
      @media (max-width: 750px) {
        --perspective-start: -100;
      }
    }
    transform: matrix3d(
          1,
          0,
          0,
          var(--x-translate),
          0,
          1,
          0,
          var(--y-translate),
          0,
          0,
          1,
          0,
          0,
          0,
          calc(var(--perspective-start) + var(--scroll) * 3),
          1
        );
  }
}
View Compiled
const year = document.querySelector('.year--1');
window.addEventListener('scroll', () => {
  if (window.innerHeight > window.scrollY) {
    const translate = window.scrollY;
    if (window.innerWidth < 750) {
      const translate = window.scrollY * 10;
    }
    year.style.setProperty('--scroll', `${translate}`);
  }
  
});
const article = document.querySelector('article');
article.addEventListener("mousemove", function(e) {
  const clientX = e.clientX;
  const clientY = e.clientY;

  const xCalc = (clientX - window.innerWidth / 2) * 0.00000009;
  const yCalc = (clientY - window.innerHeight / 2) * 0.00000009;
  year.style.setProperty("--x-translate", `${xCalc}`);
  year.style.setProperty("--y-translate", `${yCalc}`);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.