Lump commit to gh-pages. Comprises initial commit (c1c85b6) through 03db639 on master.
This commit is contained in:
Bryan Braun committed
commit
c5a7a5c97a
52 files changed
+2501
No files matched your search
@@ -0,0 +1,337 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Flying Toasters | After Dark in CSS</title>
|
||||
<link rel="shortcut icon" href="img/favicon.png" />
|
||||
<link rel="stylesheet" href="base.css">
|
||||
<style>
|
||||
|
||||
.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 deleyd 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 .2s steps(4) infinite alternate, fly 10s linear infinite;
|
||||
-moz-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
|
||||
-ms-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
|
||||
-o-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
|
||||
animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
|
||||
}
|
||||
.t2 {
|
||||
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
|
||||
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
|
||||
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
|
||||
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
|
||||
animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
|
||||
}
|
||||
.t3 {
|
||||
-webkit-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
|
||||
-moz-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
|
||||
-ms-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
|
||||
-o-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
|
||||
animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
|
||||
}
|
||||
.t4 {
|
||||
-webkit-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
|
||||
-moz-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
|
||||
-ms-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
|
||||
-o-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
|
||||
animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
|
||||
}
|
||||
.t5 {
|
||||
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
|
||||
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
|
||||
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
|
||||
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
|
||||
animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
|
||||
}
|
||||
.t6 {
|
||||
-webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
|
||||
-moz-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
|
||||
-ms-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
|
||||
-o-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
|
||||
animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
|
||||
}
|
||||
.t7 {
|
||||
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
|
||||
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
|
||||
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
|
||||
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
|
||||
animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
|
||||
}
|
||||
.t8 {
|
||||
-webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
|
||||
-moz-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
|
||||
-ms-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
|
||||
-o-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
|
||||
animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
|
||||
}
|
||||
.t9 {
|
||||
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
|
||||
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
|
||||
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
|
||||
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
|
||||
animation: flap .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 accomodate 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: -10%; }
|
||||
.p7 { right: 10%; top: -12%; }
|
||||
.p8 { right: 20%; top: -18%; }
|
||||
.p9 { right: 30%; top: -13%; }
|
||||
.p10 { right: 40%; top: -17%; }
|
||||
.p11 { right: 50%; top: -11%; }
|
||||
.p12 { right: 60%; top: -20%; }
|
||||
/* Right side, from top to bottom */
|
||||
.p13 { right: -10%; top: 10%; }
|
||||
.p14 { right: -13%; top: 20%; }
|
||||
.p15 { right: -17%; top: 30%; }
|
||||
.p16 { right: -15%; top: 50%; }
|
||||
.p17 { right: -20%; 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>
|
||||
<h1 class="visuallyhidden">Flying Toasters - After Dark in CSS</h1>
|
||||
|
||||
<!-- 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>
|
||||
Reference in new issue
Block a user