542 lines
14 KiB
HTML
542 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Flying Toasters</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>
|