Implement flying toasters
This commit is contained in:
@ -11,5 +11,6 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<a href="/sitemap/">Sitemap</a>
|
||||
<a href="/special/flying-toasters" style="color: var(--background-color); text-decoration: none;">Fly</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
38
content/special/flying-toasters/base.css
Normal file
38
content/special/flying-toasters/base.css
Normal file
@ -0,0 +1,38 @@
|
||||
/* apply a natural box layout model to all elements */
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background-color: #111;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */
|
||||
.visuallyhidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
BIN
content/special/flying-toasters/img/favicon.png
Normal file
BIN
content/special/flying-toasters/img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 464 B |
BIN
content/special/flying-toasters/img/toast0.gif
Normal file
BIN
content/special/flying-toasters/img/toast0.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 500 B |
BIN
content/special/flying-toasters/img/toast1.gif
Normal file
BIN
content/special/flying-toasters/img/toast1.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 500 B |
BIN
content/special/flying-toasters/img/toast2.gif
Normal file
BIN
content/special/flying-toasters/img/toast2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 500 B |
BIN
content/special/flying-toasters/img/toast3.gif
Normal file
BIN
content/special/flying-toasters/img/toast3.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 500 B |
BIN
content/special/flying-toasters/img/toaster-sprite.gif
Normal file
BIN
content/special/flying-toasters/img/toaster-sprite.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
541
content/special/flying-toasters/index.html
Normal file
541
content/special/flying-toasters/index.html
Normal file
@ -0,0 +1,541 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Flying Toasters Screensaver | After Dark in CSS</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Experience Flying Toasters, After Dark's most popular Mac screensaver of the 1990s, reinterpreted using modern CSS."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="shortcut icon" href="./img/favicon.png" />
|
||||
<link rel="stylesheet" href="./base.css" />
|
||||
<style>
|
||||
/* Thanks to Brian Braun: https://github.com/bryanbraun/after-dark-css/ */
|
||||
.audioContainer {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
.toaster {
|
||||
position: absolute;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url("./img/toaster-sprite.gif");
|
||||
}
|
||||
.toast {
|
||||
position: absolute;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url("./img/toast1.gif");
|
||||
}
|
||||
|
||||
/**
|
||||
* Toaster Animations
|
||||
*
|
||||
* There are several kinds of toaster animations, marked as t1, t2, & t3.
|
||||
*
|
||||
* T1 is fastest speed
|
||||
* T2 is mid speed & flaps out of sequence with T1
|
||||
* T3 is the common speed
|
||||
* T4 is a delayed batch going at the fastest speed
|
||||
* T5, T6, T7, T8, & T9 are a delayed batch of toasters going at the common speed
|
||||
*/
|
||||
.t1 {
|
||||
-webkit-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 10s linear infinite;
|
||||
-moz-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 10s linear infinite;
|
||||
-ms-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 10s linear infinite;
|
||||
-o-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 10s linear infinite;
|
||||
animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 10s linear infinite;
|
||||
}
|
||||
.t2 {
|
||||
-webkit-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 16s linear infinite;
|
||||
-moz-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 16s linear infinite;
|
||||
-ms-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 16s linear infinite;
|
||||
-o-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 16s linear infinite;
|
||||
animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 16s linear infinite;
|
||||
}
|
||||
.t3 {
|
||||
-webkit-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s linear infinite;
|
||||
-moz-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s linear infinite;
|
||||
-ms-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s linear infinite;
|
||||
-o-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s linear infinite;
|
||||
animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s linear infinite;
|
||||
}
|
||||
.t4 {
|
||||
-webkit-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 10s 5s linear infinite;
|
||||
-moz-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 10s 5s linear infinite;
|
||||
-ms-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 10s 5s linear infinite;
|
||||
-o-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 10s 5s linear infinite;
|
||||
animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 10s 5s linear infinite;
|
||||
}
|
||||
.t5 {
|
||||
-webkit-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 4s linear infinite;
|
||||
-moz-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 4s linear infinite;
|
||||
-ms-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 4s linear infinite;
|
||||
-o-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 4s linear infinite;
|
||||
animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 4s linear infinite;
|
||||
}
|
||||
.t6 {
|
||||
-webkit-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s 8s linear infinite;
|
||||
-moz-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s 8s linear infinite;
|
||||
-ms-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s 8s linear infinite;
|
||||
-o-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s 8s linear infinite;
|
||||
animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s 8s linear infinite;
|
||||
}
|
||||
.t7 {
|
||||
-webkit-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 12s linear infinite;
|
||||
-moz-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 12s linear infinite;
|
||||
-ms-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 12s linear infinite;
|
||||
-o-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 12s linear infinite;
|
||||
animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 12s linear infinite;
|
||||
}
|
||||
.t8 {
|
||||
-webkit-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s 16s linear infinite;
|
||||
-moz-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s 16s linear infinite;
|
||||
-ms-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s 16s linear infinite;
|
||||
-o-animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s 16s linear infinite;
|
||||
animation:
|
||||
flap 0.2s steps(4) infinite alternate,
|
||||
fly 24s 16s linear infinite;
|
||||
}
|
||||
.t9 {
|
||||
-webkit-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 20s linear infinite;
|
||||
-moz-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 20s linear infinite;
|
||||
-ms-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 20s linear infinite;
|
||||
-o-animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 20s linear infinite;
|
||||
animation:
|
||||
flap 0.2s steps(4) infinite alternate-reverse,
|
||||
fly 24s 20s linear infinite;
|
||||
}
|
||||
/**
|
||||
* Toast Animations
|
||||
*
|
||||
* There are several kinds of toaster animations, marked as ts1, ts2, & ts3.
|
||||
*
|
||||
* Tst1 is fast
|
||||
* Tst2 is mid speed
|
||||
* Tst3 is the common speed
|
||||
* Tst4 is a delayed batch of toast going at the common speed
|
||||
*/
|
||||
.tst1 {
|
||||
-webkit-animation: fly 10s linear infinite;
|
||||
-moz-animation: fly 10s linear infinite;
|
||||
-ms-animation: fly 10s linear infinite;
|
||||
-o-animation: fly 10s linear infinite;
|
||||
animation: fly 10s linear infinite;
|
||||
}
|
||||
.tst2 {
|
||||
-webkit-animation: fly 16s linear infinite;
|
||||
-moz-animation: fly 16s linear infinite;
|
||||
-ms-animation: fly 16s linear infinite;
|
||||
-o-animation: fly 16s linear infinite;
|
||||
animation: fly 16s linear infinite;
|
||||
}
|
||||
.tst3 {
|
||||
-webkit-animation: fly 24s linear infinite;
|
||||
-moz-animation: fly 24s linear infinite;
|
||||
-ms-animation: fly 24s linear infinite;
|
||||
-o-animation: fly 24s linear infinite;
|
||||
animation: fly 24s linear infinite;
|
||||
}
|
||||
.tst4 {
|
||||
-webkit-animation: fly 24s 12s linear infinite;
|
||||
-moz-animation: fly 24s 12s linear infinite;
|
||||
-ms-animation: fly 24s 12s linear infinite;
|
||||
-o-animation: fly 24s 12s linear infinite;
|
||||
animation: fly 24s 12s linear infinite;
|
||||
}
|
||||
|
||||
/**
|
||||
* Starting positions of objects (both toast & toasters).
|
||||
* - There is a different position for each object to prevent overlapping.
|
||||
* - We use percentages in order to accommodate for all window dimensions.
|
||||
* - Use -6% as the smallest amount for remaining off-screen.
|
||||
* - Organized into reverse "L" shaped batches to keep a constant flow.
|
||||
*/
|
||||
/* Batch 1 (-10% to -20%) */
|
||||
/* Top edge, from right to left */
|
||||
.p6 {
|
||||
right: -2%;
|
||||
top: -17%;
|
||||
}
|
||||
.p7 {
|
||||
right: 10%;
|
||||
top: -19%;
|
||||
}
|
||||
.p8 {
|
||||
right: 20%;
|
||||
top: -18%;
|
||||
}
|
||||
.p9 {
|
||||
right: 30%;
|
||||
top: -20%;
|
||||
}
|
||||
.p10 {
|
||||
right: 40%;
|
||||
top: -21%;
|
||||
}
|
||||
.p11 {
|
||||
right: 50%;
|
||||
top: -18%;
|
||||
}
|
||||
.p12 {
|
||||
right: 60%;
|
||||
top: -20%;
|
||||
}
|
||||
/* Right side, from top to bottom */
|
||||
.p13 {
|
||||
right: -17%;
|
||||
top: 10%;
|
||||
}
|
||||
.p14 {
|
||||
right: -19%;
|
||||
top: 20%;
|
||||
}
|
||||
.p15 {
|
||||
right: -21%;
|
||||
top: 30%;
|
||||
}
|
||||
.p16 {
|
||||
right: -23%;
|
||||
top: 50%;
|
||||
}
|
||||
.p17 {
|
||||
right: -25%;
|
||||
top: 70%;
|
||||
}
|
||||
|
||||
/* Batch 2 (-20% to -40%) */
|
||||
/* Top edge, from right to left */
|
||||
.p18 {
|
||||
right: 0%;
|
||||
top: -26%;
|
||||
}
|
||||
.p19 {
|
||||
right: 10%;
|
||||
top: -20%;
|
||||
}
|
||||
.p20 {
|
||||
right: 20%;
|
||||
top: -36%;
|
||||
}
|
||||
.p21 {
|
||||
right: 30%;
|
||||
top: -24%;
|
||||
}
|
||||
.p22 {
|
||||
right: 40%;
|
||||
top: -33%;
|
||||
}
|
||||
.p23 {
|
||||
right: 60%;
|
||||
top: -40%;
|
||||
}
|
||||
/* Right side, from top to bottom */
|
||||
.p24 {
|
||||
right: -26%;
|
||||
top: 10%;
|
||||
}
|
||||
.p25 {
|
||||
right: -36%;
|
||||
top: 30%;
|
||||
}
|
||||
.p26 {
|
||||
right: -29%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
/* Batch 3 (-40% to -60%)*/
|
||||
/* Top edge, from right to left */
|
||||
.p27 {
|
||||
right: 0;
|
||||
top: -46%;
|
||||
}
|
||||
.p28 {
|
||||
right: 10%;
|
||||
top: -56%;
|
||||
}
|
||||
.p29 {
|
||||
right: 20%;
|
||||
top: -49%;
|
||||
}
|
||||
.p30 {
|
||||
right: 30%;
|
||||
top: -60%;
|
||||
}
|
||||
/* Right side, from top to bottom */
|
||||
.p31 {
|
||||
right: -46%;
|
||||
top: 10%;
|
||||
}
|
||||
.p32 {
|
||||
right: -56%;
|
||||
top: 20%;
|
||||
}
|
||||
.p33 {
|
||||
right: -49%;
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
/* Flapping animation */
|
||||
@-webkit-keyframes flap {
|
||||
from {
|
||||
background-position: 0px;
|
||||
}
|
||||
to {
|
||||
background-position: -256px;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes flap {
|
||||
from {
|
||||
background-position: 0px;
|
||||
}
|
||||
to {
|
||||
background-position: -256px;
|
||||
}
|
||||
}
|
||||
@-o-keyframes flap {
|
||||
from {
|
||||
background-position: 0px;
|
||||
}
|
||||
to {
|
||||
background-position: -256px;
|
||||
}
|
||||
}
|
||||
@keyframes flap {
|
||||
from {
|
||||
background-position: 0px;
|
||||
}
|
||||
to {
|
||||
background-position: -256px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Gliding animation using translate */
|
||||
/* Moving 1600px, to accomodate for large screens */
|
||||
@-webkit-keyframes fly {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-1600px, 1600px);
|
||||
-moz-transform: translate(-1600px, 1600px);
|
||||
-o-transform: translate(-1600px, 1600px);
|
||||
-ms-transform: translate(-1600px, 1600px);
|
||||
transform: translate(-1600px, 1600px);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes fly {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-1600px, 1600px);
|
||||
-moz-transform: translate(-1600px, 1600px);
|
||||
-o-transform: translate(-1600px, 1600px);
|
||||
-ms-transform: translate(-1600px, 1600px);
|
||||
transform: translate(-1600px, 1600px);
|
||||
}
|
||||
}
|
||||
@-o-keyframes fly {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-1600px, 1600px);
|
||||
-moz-transform: translate(-1600px, 1600px);
|
||||
-o-transform: translate(-1600px, 1600px);
|
||||
-ms-transform: translate(-1600px, 1600px);
|
||||
transform: translate(-1600px, 1600px);
|
||||
}
|
||||
}
|
||||
@keyframes fly {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-1600px, 1600px);
|
||||
-moz-transform: translate(-1600px, 1600px);
|
||||
-o-transform: translate(-1600px, 1600px);
|
||||
-ms-transform: translate(-1600px, 1600px);
|
||||
transform: translate(-1600px, 1600px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="audioContainer">
|
||||
<audio controls autoplay src="./After Dark 3.0 - OMTW.mp3"></audio>
|
||||
</div>
|
||||
<!-- First group of objects -->
|
||||
<div class="toaster t1 p6"></div>
|
||||
<div class="toaster t3 p7"></div>
|
||||
<div class="toast tst1 p8"></div>
|
||||
<div class="toaster t3 p9"></div>
|
||||
<div class="toaster t1 p11"></div>
|
||||
<div class="toaster t3 p12"></div>
|
||||
<div class="toaster t2 p13"></div>
|
||||
<div class="toast tst3 p14"></div>
|
||||
<div class="toast tst2 p16"></div>
|
||||
<div class="toaster t1 p17"></div>
|
||||
<div class="toast tst2 p19"></div>
|
||||
<div class="toast tst3 p20"></div>
|
||||
<div class="toaster t2 p21"></div>
|
||||
<div class="toast tst1 p24"></div>
|
||||
<div class="toaster t1 p22"></div>
|
||||
<div class="toast tst2 p26"></div>
|
||||
<div class="toaster t1 p28"></div>
|
||||
<div class="toast tst2 p30"></div>
|
||||
<div class="toaster t2 p31"></div>
|
||||
<div class="toaster t1 p32"></div>
|
||||
<div class="toast tst3 p33"></div>
|
||||
|
||||
<!-- wave 1 of (fast delayed) objects -->
|
||||
<div class="toaster t4 p27"></div>
|
||||
<div class="toaster t4 p10"></div>
|
||||
<div class="toaster t4 p25"></div>
|
||||
<div class="toaster t4 p29"></div>
|
||||
|
||||
<!-- wave 2 of (delayed) objects -->
|
||||
<div class="toaster t5 p15"></div>
|
||||
<div class="toaster t5 p18"></div>
|
||||
<div class="toaster t5 p22"></div>
|
||||
|
||||
<!-- wave 3 of (delayed) objects -->
|
||||
<div class="toaster t6 p6"></div>
|
||||
<div class="toaster t6 p11"></div>
|
||||
<div class="toaster t6 p15"></div>
|
||||
<div class="toaster t6 p19"></div>
|
||||
<div class="toaster t6 p23"></div>
|
||||
|
||||
<!-- wave 5 of (delayed) objects -->
|
||||
<div class="toast tst4 p10"></div>
|
||||
<div class="toast tst4 p23"></div>
|
||||
<div class="toast tst4 p15"></div>
|
||||
<div class="toaster t7 p7"></div>
|
||||
<div class="toaster t7 p12"></div>
|
||||
<div class="toaster t7 p16"></div>
|
||||
<div class="toaster t7 p20"></div>
|
||||
<div class="toaster t7 p24"></div>
|
||||
|
||||
<!-- wave 6 of (delayed) objects -->
|
||||
<div class="toaster t8 p8"></div>
|
||||
<div class="toaster t8 p13"></div>
|
||||
<div class="toaster t8 p17"></div>
|
||||
<div class="toaster t8 p25"></div>
|
||||
|
||||
<!-- wave 7 of (delayed) objects -->
|
||||
<div class="toaster t9 p14"></div>
|
||||
<div class="toaster t9 p18"></div>
|
||||
<div class="toaster t9 p21"></div>
|
||||
<div class="toaster t9 p26"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -194,7 +194,9 @@ export default async function (eleventyConfig) {
|
||||
|
||||
// Passthrough
|
||||
|
||||
eleventyConfig.addPassthroughCopy({ "./public/": "/" });
|
||||
eleventyConfig
|
||||
.addPassthroughCopy({ "./public/": "/" })
|
||||
.addPassthroughCopy("./content/special/");
|
||||
|
||||
// Get the first `n` elements of a collection.
|
||||
eleventyConfig.addFilter("head", (array, n) => {
|
||||
|
||||
Reference in New Issue
Block a user