Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Doggie Screensaver

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.

<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=''>
: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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment