Doggie Screensaver

doggie-screensaver.markdown

Doggie Screensaver

Pretty hacky attempt at recreating the floating screensaver for the Photo Gallery #CodePenChallenge with only CSS 🤣

A Pen by Ryan Mulligan on CodePen.

License.

index.html

<img src='https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1517423440428-a5a00ad493e8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1518717758536-85ae29035b6d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1535930891776-0c2dfb7fda1a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1504595403659-9088ce801e29?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>

style.scss

:root {
  --duration: 20s;
  --delay: 20s;
}

html {
  background-color: black;
  animation: shrink var(--duration) var(--delay) linear infinite;
}

body {
  position: relative;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  animation: spin var(--duration) var(--delay) linear infinite;
  transform-style: preserve-3d;
  perspective: 25rem;
}

@mixin setImage($a, $x) {
  --name: float-up-#{$a};
  --duration: calc(20s * #{$a});
  left: #{$x}vw;
  z-index: -1 * $a;
}

img {
  --duration: 40s;
  --name: float-up-1;
  position: absolute;
  top: 0;
  left: 0;
  width: 33vw;
  transform: translateY(200vh);
  animation: var(--name) var(--duration) linear infinite;
  box-shadow: 1px 3px 15px rgba(0,0,0,0.5);
  z-index: 1;

  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      animation-delay: ($i - 1) * -3s;
    }
  }
  
  &:nth-child(1)  { @include setImage(1,  0) }
  &:nth-child(2)  { @include setImage(3, 10) }
  &:nth-child(3)  { @include setImage(2, 90) }
  &:nth-child(4)  { @include setImage(1, 36) }
  &:nth-child(5)  { @include setImage(3, 62) }
  &:nth-child(6)  { @include setImage(2, 15) }
  &:nth-child(7)  { @include setImage(2, 55) }
  &:nth-child(8)  { @include setImage(3,-20) }
  &:nth-child(9)  { @include setImage(1, 68) }
  &:nth-child(10) { @include setImage(2,  0) }
}

@keyframes float-up-3 {
  from {
    transform: translateY(200vh) translateZ(-50vh);
  }
  to {
    transform: translateY(-200vh) translateZ(-50vh);
  }
}

@keyframes float-up-2 {
  from {
    transform: translateY(150vh) translateZ(-25vh);
  }
  to {
    transform: translateY(-150vh) translateZ(-25vh);
  }
}

@keyframes float-up-1 {
  from {
    transform: translateY(100vh);
  }
  to {
    transform: translateY(-100vh);
  }
}

@keyframes spin {
  10%,
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes shrink {
  0% {
    transform: scale(1) translateX(0);
  }
  2.5% {
    transform: scale(0.75) translateX(5%);
  }
  7.5% {
    transform: scale(0.75) translateX(-5%);
  }
  10%,
  100% {
    transform: scale(1);
  }
}