Skip to content

Instantly share code, notes, and snippets.

@kentbrew

kentbrew/motion.html

Last active December 15, 2015 16:38
Show Gist options
  • Save kentbrew/5290122 to your computer and use it in GitHub Desktop.
Save kentbrew/5290122 to your computer and use it in GitHub Desktop.
Download ZIP
Motion demo for HTML5DevConf 2013
Raw
motion.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Drifting Things</title>
<style>
body {
text-align: center;
padding: 0;
margin: 0;
}
/* background */
div#snow {
width: 800px;
height: 600px;
margin: 10px auto;
border: 2px solid #000;
background: #ffa;
position: relative;
overflow: hidden;
}
/* all spans are absolute */
div#snow span {
position: absolute;
}
/* flakes */
div#snow span.flake {
height: 50px;
width: 50px;
opacity: .75;
color: #fff;
font-size: 30px;
line-height: 50px;
font-family: Helvetica;
position: absolute;
left:0;
}
/* the flakes and their arms */
span.a {
left: 200px;
}
span.a span.flakeArm {
width: 200px;
animation: spinLeft 9s infinite ease-in-out;
}
span.a span.flakeArm span.flake {
background: #800;
animation: spinRight 3s infinite linear;
}
span.b {
left: 500px;
}
span.b span.flakeArm {
width: 220px;
animation: spinRight 11s infinite ease-in-out;
}
span.b span.flakeArm span.flake {
background: #080;
animation: spinLeft 5s infinite linear;
}
span.c {
left: 400px;
}
span.c span.flakeArm {
width: 240px;
animation: spinLeft 13s infinite ease-in-out;
}
span.c span.flakeArm span.flake {
background: #008;
animation: spinRight 4s infinite linear;
}
span.d {
left: 150px;
}
span.d span.flakeArm {
width: 260px;
animation: spinRight 17s infinite ease-in-out;
}
span.d span.flakeArm span.flake {
background: #808;
}
span.e {
left: 250px;
}
span.e span.flakeArm {
width: 280px;
animation: spinLeft 19s infinite ease-in-out;
}
span.e span.flakeArm span.flake {
background: #088;
}
span.f {
left: 350px;
}
span.f span.flakeArm {
width: 200px;
animation: spinLeft 7s infinite ease-in-out;
}
span.f span.flakeArm span.flake {
background: #8a0;
}
span.g {
left: 450px;
}
span.g span.flakeArm {
width: 220px;
animation: spinRight 11s infinite ease-in-out;
}
span.g span.flakeArm span.flake {
background: #a80;
}
span.h {
left: 550px;
}
span.h span.flakeArm {
width: 240px;
animation: spinLeft 13s infinite ease-in-out;
}
span.h span.flakeArm span.flake {
background: #a08;
}
span.i {
left: 650px;
}
span.i span.flakeArm {
width: 260px;
animation: spinRight 17s infinite ease-in-out;
}
span.i span.flakeArm span.flake {
background: #8a8;
}
span.j {
left: 750px;
}
span.j span.flakeArm {
width: 280px;
animation: spinLeft 23s infinite ease-in-out;
}
span.j span.flakeArm span.flake {
background: #a88;
}
/* drop speed */
span.drop0 {
-webkit-animation: down 23s infinite ease-in-out;
animation: down 23s infinite ease-in-out;
}
span.drop1 {
-webkit-animation: down 29s infinite ease-in-out;
animation: down 29s infinite ease-in-out;
}
span.drop2 {
-webkit-animation: down 31s infinite ease-in-out;
animation: down 31s infinite ease-in-out;
}
span.drop3 {
-webkit-animation: down 37s infinite ease-in-out;
animation: down 37s infinite ease-in-out;
}
span.drop4 {
-webkit-animation: down 41s infinite ease-in-out;
animation: down 41s infinite ease-in-out;
}
/* flake spin speed */
span.flake.spin0 {
-webkit-animation: spinRight 3s infinite ease-in-out;
animation: spinRight 3s infinite ease-in-out;
}
span.flake.spin1 {
-webkit-animation: spinRight 5s infinite ease-in-out;
animation: spinRight 5s infinite ease-in-out;
}
span.flake.spin2 {
-webkit-animation: spinRight 7s infinite ease-in-out;
animation: spinRight 7s infinite ease-in-out;
}
span.flake.spin3 {
-webkit-animation: spinLeft 4s infinite ease-in-out;
animation: spinLeft 4s infinite ease-in-out;
}
span.flake.spin4 {
-webkit-animation: spinLeft 6s infinite ease-in-out;
animation: spinLeft 6s infinite ease-in-out;
}
span.flake.spin5 {
-webkit-animation: spinRight 8s infinite ease-in-out;
animation: spinRight 8s infinite ease-in-out;
}
/* arm spin */
span.flakeArm.spin0 {
-webkit-animation: spinLeft 11s infinite;
animation: spinLeft 11s infinite;
}
span.flakeArm.spin1 {
-webkit-animation: spinRight 13s infinite;
animation: spinRight 13s infinite;
}
span.flakeArm.spin2 {
-webkit-animation: spinLeft 17s infinite;
animation: spinLeft 17s infinite;
}
span.flakeArm.spin3 {
-webkit-animation: spinRight 19s infinite;
animation: spinRight 19s infinite;
}
span.flakeArm.spin4 {
-webkit-animation: spinLeft 23s infinite;
animation: spinLeft 23s infinite;
}
span.flakeArm.spin5 {
-webkit-animation: spinRight 27s infinite;
animation: spinRight 29s infinite;
}
body.showArms span.flakeArm {
border-top: 3px solid black;
}
/* drop*/
@-webkit-keyframes down {
from {-webkit-transform: translateY(-100px);}
to {-webkit-transform: translateY(700px);}
}
@keyframes down {
from {transform: translateY(-100px);}
to {transform: translateY(700px);}
}
/* spin right */
@-webkit-keyframes spinRight {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
@keyframes spinRight {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
/* spin left */
@-webkit-keyframes spinLeft {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-359deg);}
}
@keyframes spinLeft {
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}
</style>
</head>
<body>
<div id="snow">
<span class="a flakeAxis drop0">
<span class="flakeArm spin1">
<span class="flake spin2">0</span>
</span>
</span>
<span class="b flakeAxis drop1">
<span class="flakeArm spin2">
<span class="flake spin3">1</span>
</span>
</span>
<span class="c flakeAxis drop2">
<span class="flakeArm spin3">
<span class="flake spin4">2</span>
</span>
</span>
<span class="d flakeAxis drop3">
<span class="flakeArm spin4">
<span class="flake spin5">3</span>
</span>
</span>
<span class="e flakeAxis drop4">
<span class="flakeArm spin5">
<span class="flake spin0">4</span>
</span>
</span>
<span class="f flakeAxis drop5">
<span class="flakeArm spin0">
<span class="flake spin1">5</span>
</span>
</span>
<span class="g flakeAxis drop0">
<span class="flakeArm spin2">
<span class="flake spin3">6</span>
</span>
</span>
<span class="h flakeAxis drop1">
<span class="flakeArm spin3">
<span class="flake spin4">7</span>
</span>
</span>
<span class="i flakeAxis drop2">
<span class="flakeArm spin4">
<span class="flake spin5">8</span>
</span>
</span>
<span class="j flakeAxis drop3">
<span class="flakeArm spin5">
<span class="flake spin0">9</span>
</span>
</span>
</div>
<script>
document.body.onclick = function() {
if (document.body.className) {
document.body.className = '';
} else {
document.body.className = 'showArms';
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment