<header>
  <img src="https://www.fillmurray.com/300/200" alt="Bill Murray Pic 1" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61811/plewis.jpeg" alt="Parker Lewis and buds" />
  <img src="https://www.fillmurray.com/600/400" alt="Bill Murray Pic 2" />
  <img src="https://www.fillmurray.com/500/335" alt="Parker Lewis and buds" />
  <img src="https://www.fillmurray.com/200/130" alt="Bill Murray" />
  <svg viewBox="0 0 1980 800">
    <path stroke="#ffffff" stroke-width="0" fill="none" d="M 0,0 Q 300,100 450,80 Q 800,60 900,120 Q 1200,260 1350,220 Q 1500,190 1980,50" />
    <path stroke="#ffffff" stroke-width="1" fill="none" d="M 0,0 C 200,100 300,200 400,150 C 500,100 600,200 1080,200 C 1280,200 1680,200 1980,0" />
  </svg>
    <div>
  <h1>Photo Sharr</h1>
  <p>Because you needed another app&nbsp;to&nbsp;do&nbsp;this</p>
    </div>
</header>

img {
  width: 200px;
  position: absolute;
  top: -10vh;
  left: -400px;
  z-index: 0;
  animation: translate-it 8s 0s infinite ease-in;
  opacity: 0;
  will-change: transform, offset-distance, opacity;
}
.animation img {
  transition: opacity 1.8s 2s ease-out;
  opacity: .8;
}
img:nth-of-type(2) {
  animation-delay: -3s;
  transition-delay: .5s;
  top: 10vh;
}
img:nth-of-type(3) {
  animation-delay: -1.4s;
  transition-delay: 1.5s;
  top: 30vh;
}
img:nth-of-type(4) {
  animation-delay: -3.9s;
  transition-delay: .9s;
  top: 50vh;
}
img:nth-of-type(5) {
  animation-delay: -5.9s;
  transition-delay: .2s;
  top: 70vh;
}

@media all and (max-height: 40em) {
  img:nth-of-type(2) {
    top: 1rem;
  }
  img:nth-of-type(3) {
    top: 3rem;
  }
  img:nth-of-type(4) {
    top: 5rem;
  }
  img:nth-of-type(5) {
    top: 7rem;
  }
}

/**/
@supports (offset-distance: 100%) {
  img {
    offset-path: path("M 0,0 Q 300,100 450,80 Q 800,60 900,120 Q 1200,260 1350,220 Q 1500,190 1980,50");
    offset-rotate: auto 20deg;
    animation-name: offset-it, rotate-it30;
  }
  img:nth-of-type(odd) {
    animation-name: offset-it, rotate-it-30;
  }
  img:nth-of-type(2) {
    offset-path: path("M 0,0 C 200,100 300,200 400,150 C 500,100 600,200 1080,200 C 1280,200 1680,200 1980,0");
  }
  img:nth-of-type(3) {
    offset-path: path("M 0,0 C 200,100 300,200 600,150 C 800,100 900,200 1080,200 C 1280,200 1680,200 1980,0");
  }
}
/**/

@keyframes translate-it {
  100% {
    transform: translateX(calc(100vw + 400px));
  }
}
@keyframes offset-it {
  100% {
    offset-distance: 100%;
  }
}
@keyframes rotate-it30 {
  0% {
    transform: rotateY(-20deg);
  }
  100% {
    transform: rotateY(30deg);
  }
}
@keyframes rotate-it-30 {
  0% {
    transform: rotateY(20deg);
  }
  100% {
    transform: rotateY(-30deg);
  }
}
@keyframes fade-in {
  100% {
    opacity: 1;
  }
}

* {
  box-sizing: border-box;
}
body {
  overflow-x: hidden;
  min-height: 100vh;
  color: #f8f8fb;
  font-family: -apple-system, "Segoe UI", "Roboto", sans-serif;
}
svg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

header {
  position: relative;
  width: 100%;
  max-width: 1980px;
  height: 90vh;
  margin: 0 auto;
  background: #294b4e;
  background: radial-gradient(circle,#597b7e,#294b4e);
  overflow: hidden;
  perspective: 300px;
}
h1 {
  font-size: 9vmin;
  font-weight: 700;
  margin-bottom: 5vh;
  position:relative;
  z-index:2;
  text-shadow: 0 0 6px #294b4e;
}
div {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: absolute; 
  top: 0;left:0;right:0;bottom:0;
  z-index: 10;
}
p {
  font-size: 4vmin;
  letter-spacing: .075em;
  padding: 0 2rem;
  text-align: center;
  line-height: 1.5;
  position:relative;
  text-shadow: 0 0 6px #294b4e;
}

document.documentElement.classList.add('animation');