Skip to content

Instantly share code, notes, and snippets.

@saske505

saske505/index.html

Created May 21, 2015 14:16
Show Gist options
  • Save saske505/259ddb7dedd78d839ca3 to your computer and use it in GitHub Desktop.
Save saske505/259ddb7dedd78d839ca3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style id="jsbin-css">
.grass {
background: bottom left;
height:140px;
width:100%;
left: 0;
top:0;
background-size: contain;
position: absolute;
}
.circle
{
position:absolute;
background: white;
height:100%;
width:100%;
opacity: 0.1;
background-size:contain;
background-repeat: no-repeat;
background-size:contain;
}
.circletwo
{
position:absolute;
background: url(
http://iphonewallpapers-hd.com/walls/3d_art_fire_smoke_wallpaper-other.jpg);
height:100%;
width: 550px;
opacity: 0.1;
background-size:100%;
background-repeat: no-repeat;
z-index:99999999!important;
}
.circle:nth-child(2) {
background: #ff0000!important;
}
.circle:nth-child(3) {
background: #34495e!important;
}
.circle:odd {
background: #347795!important;
}
body {
overflow: hidden;
}
div#steam {
height: 100%;
width: 100%;
background-size: contain;
background-image: url('http://pixelnest.io/tutorials/2d-game-unity/background-and-camera/-img/background.png');
background-repeat: repeat-x;
background-position: left ;
-webkit-animation: slide 110s linear infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes slide {
from { background-position: left 100%; }
to { background-position: right 100%; }
}
@-moz-keyframes slide {
from { background-position:50% 50%; }
to { background-position: 50% 50%; }
}
.block {
position:absolute;
border-radius: 100%;
height:50px;
width:50px;
background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Topological_vector_space_illust.svg/2000px-Topological_vector_space_illust.svg.png');
margin-left:20px;
padding:10px;
background-size: contain;
z-index:99999999;
}
.block:odd {
background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Topological_vector_space_illust.svg/2000px-Topological_vector_space_illust.svg.png');
position:absolute;
height:12px;
width:60px;
margin-right:20px;
padding:10px;
background-size: contain;
z-index:99999999;
opacity: 0.8;
}
.boy {position:static;}
.boy img {
left:0;
bottom: 0;
height:90px;
position:absolute;
}
.bubble {
position: relative;
width: 180px;
height: 60px;
padding: 0px;
background: #98B51F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #98B51F transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 75px;
}
/*Front Row*/
.blade1, .blade2, .blade3, .blade4, .blade5,
.blade6, .blade7, .blade8, .blade9, .blade10,
.blade11, .blade12, .blade13, .blade14, .blade15,
.blade16, .blade17, .blade18, .blade19, .blade20,
.blade21, .blade22, .blade23, .blade24, .blade25,
.blade26, .blade27, .blade28, .blade29, .blade30,
.blade31, .blade32, .blade33, .blade34, .blade35,
.blade36, .blade37, .blade38, .blade39, .blade40,
.blade41, .blade42, .blade43, .blade44, .blade45{
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #156A32;
position: absolute;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
z-index: 7;
bottom: 0px;
}
.blade1 {left: 0px;}
.blade2 {left: 25px;}
.blade3 {left: 50px;}
.blade4 {left: 75px;}
.blade5 {left: 100px;}
.blade6 {left: 125px;}
.blade7 {left: 150px;}
.blade8 {left: 175px;}
.blade9 {left: 200px;}
.blade10 {left: 225px;}
.blade11 {left: 250px;}
.blade12 {left: 275px;}
.blade13 {left: 300px;}
.blade14 {left: 325px;}
.blade15 {left: 350px;}
.blade16 {left: 375px;}
.blade17 {left: 400px;}
.blade18 {left: 425px;}
.blade19 {left: 450px;}
.blade20 {left: 475px;}
.blade21 {left: 500px;}
.blade22 {left: 525px;}
.blade23 {left: 550px;}
.blade24 {left: 575px;}
.blade25 {left: 600px;}
.blade26 {left: 625px;}
.blade27 {left: 650px;}
.blade28 {left: 675px;}
.blade29 {left: 700px;}
.blade30 {left: 725px;}
.blade31 {left: 750px;}
.blade32 {left: 775px;}
.blade33 {left: 800px;}
.blade34 {left: 825px;}
.blade35 {left: 850px;}
.blade36 {left: 875px;}
.blade37 {left: 900px;}
.blade38 {left: 925px;}
.blade39 {left: 950px;}
.blade40 {left: 975px;}
.blade41 {left: 1000px;}
.blade42 {left: 1025px;}
.blade43 {left: 1050px;}
.blade44 {left: 1075px;}
.blade45 {left: 1100px;}
@-webkit-keyframes mymove {
0% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #156A32; }
25% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #156A32; }
50% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #156A32; }
75% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #156A32; }
100% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #156A32; }
}
/*Back Row*/
.blade1b, .blade2b, .blade3b, .blade4b, .blade5b,
.blade6b, .blade7b, .blade8b, .blade9b, .blade10b,
.blade11b, .blade12b, .blade13b, .blade14b, .blade15b,
.blade16b, .blade17b, .blade18b, .blade19b, .blade20b,
.blade21b, .blade22b, .blade23b, .blade24b, .blade25b,
.blade26b, .blade27b, .blade28b, .blade29b, .blade30b,
.blade31b, .blade32b, .blade33b, .blade34b, .blade35b,
.blade36b, .blade37b, .blade38b, .blade39b, .blade40b,
.blade41b, .blade42b, .blade43b, .blade44b, .blade45b {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #1E4018;
position: absolute;
-webkit-animation: mymoveb 5s infinite;
animation: mymoveb 5s infinite;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
z-index: 5;
bottom: 0px;
}
.blade1b {left: 15px;}
.blade2b {left: 35px;}
.blade3b {left: 65px;}
.blade4b {left: 85px;}
.blade5b {left: 115px;}
.blade6b {left: 135px;}
.blade7b {left: 165px;}
.blade8b {left: 185px;}
.blade9b {left: 215px;}
.blade10b {left: 235px;}
.blade11b {left: 265px;}
.blade12b {left: 285px;}
.blade13b {left: 315px;}
.blade14b {left: 335px;}
.blade15b {left: 365px;}
.blade16b {left: 385px;}
.blade17b {left: 415px;}
.blade18b {left: 435px;}
.blade19b {left: 465px;}
.blade20b {left: 485px;}
.blade21b {left: 515px;}
.blade22b {left: 535px;}
.blade23b {left: 565px;}
.blade24b {left: 585px;}
.blade25b {left: 615px;}
.blade26b {left: 635px;}
.blade27b {left: 665px;}
.blade28b {left: 685px;}
.blade29b {left: 715px;}
.blade30b {left: 735px;}
.blade31b {left: 765px;}
.blade32b {left: 785px;}
.blade33b {left: 815px;}
.blade34b {left: 835px;}
.blade35b {left: 865px;}
.blade36b {left: 885px;}
.blade37b {left: 915px;}
.blade38b {left: 935px;}
.blade39b {left: 965px;}
.blade40b {left: 985px;}
.blade41b {left: 1015px;}
.blade42b {left: 1035px;}
.blade43b {left: 1065px;}
.blade44b {left: 1085px;}
.blade45b {left: 1115px;}
@-webkit-keyframes mymoveb {
0% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #1E4018; }
25% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #1E4018; }
50% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #1E4018; }
75% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #1E4018; }
100% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #1E4018; }
}
</style>
</head>
<body>
<div style="background: #000; height: 800px;width:100%;">
<div id="steam" style="height:800px; width:100%;">
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block-other"></span>
<div class="boy">
<img src="https://s-media-cache-ak0.pinimg.com/236x/71/dc/79/71dc797b289fc5fcb3a4fe7538940460.jpg" />
</div>
<div class="grass"></div>
<div class="grass" style="margin-left:300px!important;"></div>
</div>
</div>
<!--Front Row-->
<div class="blade1"></div>
<div class="blade2"></div>
<div class="blade3"></div>
<div class="blade4"></div>
<div class="blade5"></div>
<div class="blade6"></div>
<div class="blade7"></div>
<div class="blade8"></div>
<div class="blade9"></div>
<div class="blade10"></div>
<div class="blade11"></div>
<div class="blade12"></div>
<div class="blade13"></div>
<div class="blade14"></div>
<div class="blade15"></div>
<div class="blade16"></div>
<div class="blade17"></div>
<div class="blade18"></div>
<div class="blade19"></div>
<div class="blade20"></div>
<div class="blade21"></div>
<div class="blade22"></div>
<div class="blade23"></div>
<div class="blade24"></div>
<div class="blade25"></div>
<div class="blade26"></div>
<div class="blade27"></div>
<div class="blade28"></div>
<div class="blade29"></div>
<div class="blade30"></div>
<div class="blade31"></div>
<div class="blade32"></div>
<div class="blade33"></div>
<div class="blade34"></div>
<div class="blade35"></div>
<div class="blade36"></div>
<div class="blade37"></div>
<div class="blade38"></div>
<div class="blade39"></div>
<div class="blade40"></div>
<div class="blade41"></div>
<div class="blade42"></div>
<div class="blade43"></div>
<div class="blade44"></div>
<div class="blade45"></div>
<!--Back Row-->
<div class="blade1b"></div>
<div class="blade2b"></div>
<div class="blade3b"></div>
<div class="blade4b"></div>
<div class="blade5b"></div>
<div class="blade6b"></div>
<div class="blade7b"></div>
<div class="blade8b"></div>
<div class="blade9b"></div>
<div class="blade10b"></div>
<div class="blade11b"></div>
<div class="blade12b"></div>
<div class="blade13b"></div>
<div class="blade14b"></div>
<div class="blade15b"></div>
<div class="blade16b"></div>
<div class="blade17b"></div>
<div class="blade18b"></div>
<div class="blade19b"></div>
<div class="blade20b"></div>
<div class="blade21b"></div>
<div class="blade22b"></div>
<div class="blade23b"></div>
<div class="blade24b"></div>
<div class="blade25b"></div>
<div class="blade26b"></div>
<div class="blade27b"></div>
<div class="blade28b"></div>
<div class="blade29b"></div>
<div class="blade30b"></div>
<div class="blade31b"></div>
<div class="blade32b"></div>
<div class="blade33b"></div>
<div class="blade34b"></div>
<div class="blade35b"></div>
<div class="blade36b"></div>
<div class="blade37b"></div>
<div class="blade38b"></div>
<div class="blade39b"></div>
<div class="blade40b"></div>
<div class="blade41b"></div>
<div class="blade42b"></div>
<div class="blade43b"></div>
<div class="blade44b"></div>
<div class="blade45b"></div>
<script id="jsbin-javascript">
function ran(min, max)
{
return Math.floor(Math.random() * (max - min ++ )) + min;
}
function moveBlock()
{
$(".block").each(function() {
x = ran(19, 97);
y = ran(9, 73);
pos = $(this).position();
nowX = pos.left + x;
nowY = pos.top + y;
$(this).delay(0)
.animate({left: nowX, top: nowY}, {duration:3400, easing: 'linear', complete:moveBlock});
});
}
moveBlock();
function moveBlockother()
{
$(".block:odd").each(function() {
x = ran(45, 90 + 70);
y = ran(x, 123);
pos = $(this).position();
nowX = pos.left + x;
nowY = pos.top + y;
$(this).delay(0)
.animate({top: x, right: nowY + pos }, {duration:2000, easing: 'swing', complete:moveBlockother});
});
}
$(document).mousemove(function(e){
$(".boy img").animate({left:e.pageX, right:e.pageY}, {duration:100, easing: 'swing', complete:moveBlock});
});
function moveBack()
{
$(document).ready(function() {
$('.baby').animate({left: 6610, top: 0}, {duration:25400, easing: 'swing', complete:moveBack});
});
}
moveBack();
moveBlockother();
moveBlock();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"><\/script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"><\/script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
</head>
<body>
<div style="background: #000; height: 800px;width:100%;">
<div id="steam" style="height:800px; width:100%;">
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block-other"></span>
<div class="boy">
<img src="https://s-media-cache-ak0.pinimg.com/236x/71/dc/79/71dc797b289fc5fcb3a4fe7538940460.jpg" />
</div>
<div class="grass"></div>
<div class="grass" style="margin-left:300px!important;"></div>
</div>
</div>
<\!--Front Row-->
<div class="blade1"></div>
<div class="blade2"></div>
<div class="blade3"></div>
<div class="blade4"></div>
<div class="blade5"></div>
<div class="blade6"></div>
<div class="blade7"></div>
<div class="blade8"></div>
<div class="blade9"></div>
<div class="blade10"></div>
<div class="blade11"></div>
<div class="blade12"></div>
<div class="blade13"></div>
<div class="blade14"></div>
<div class="blade15"></div>
<div class="blade16"></div>
<div class="blade17"></div>
<div class="blade18"></div>
<div class="blade19"></div>
<div class="blade20"></div>
<div class="blade21"></div>
<div class="blade22"></div>
<div class="blade23"></div>
<div class="blade24"></div>
<div class="blade25"></div>
<div class="blade26"></div>
<div class="blade27"></div>
<div class="blade28"></div>
<div class="blade29"></div>
<div class="blade30"></div>
<div class="blade31"></div>
<div class="blade32"></div>
<div class="blade33"></div>
<div class="blade34"></div>
<div class="blade35"></div>
<div class="blade36"></div>
<div class="blade37"></div>
<div class="blade38"></div>
<div class="blade39"></div>
<div class="blade40"></div>
<div class="blade41"></div>
<div class="blade42"></div>
<div class="blade43"></div>
<div class="blade44"></div>
<div class="blade45"></div>
<\!--Back Row-->
<div class="blade1b"></div>
<div class="blade2b"></div>
<div class="blade3b"></div>
<div class="blade4b"></div>
<div class="blade5b"></div>
<div class="blade6b"></div>
<div class="blade7b"></div>
<div class="blade8b"></div>
<div class="blade9b"></div>
<div class="blade10b"></div>
<div class="blade11b"></div>
<div class="blade12b"></div>
<div class="blade13b"></div>
<div class="blade14b"></div>
<div class="blade15b"></div>
<div class="blade16b"></div>
<div class="blade17b"></div>
<div class="blade18b"></div>
<div class="blade19b"></div>
<div class="blade20b"></div>
<div class="blade21b"></div>
<div class="blade22b"></div>
<div class="blade23b"></div>
<div class="blade24b"></div>
<div class="blade25b"></div>
<div class="blade26b"></div>
<div class="blade27b"></div>
<div class="blade28b"></div>
<div class="blade29b"></div>
<div class="blade30b"></div>
<div class="blade31b"></div>
<div class="blade32b"></div>
<div class="blade33b"></div>
<div class="blade34b"></div>
<div class="blade35b"></div>
<div class="blade36b"></div>
<div class="blade37b"></div>
<div class="blade38b"></div>
<div class="blade39b"></div>
<div class="blade40b"></div>
<div class="blade41b"></div>
<div class="blade42b"></div>
<div class="blade43b"></div>
<div class="blade44b"></div>
<div class="blade45b"></div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.grass {
background: bottom left;
height:140px;
width:100%;
left: 0;
top:0;
background-size: contain;
position: absolute;
}
.circle
{
position:absolute;
background: white;
height:100%;
width:100%;
opacity: 0.1;
background-size:contain;
background-repeat: no-repeat;
background-size:contain;
}
.circletwo
{
position:absolute;
background: url(
http://iphonewallpapers-hd.com/walls/3d_art_fire_smoke_wallpaper-other.jpg);
height:100%;
width: 550px;
opacity: 0.1;
background-size:100%;
background-repeat: no-repeat;
z-index:99999999!important;
}
.circle:nth-child(2) {
background: #ff0000!important;
}
.circle:nth-child(3) {
background: #34495e!important;
}
.circle:odd {
background: #347795!important;
}
body {
overflow: hidden;
}
div#steam {
height: 100%;
width: 100%;
background-size: contain;
background-image: url('http://pixelnest.io/tutorials/2d-game-unity/background-and-camera/-img/background.png');
background-repeat: repeat-x;
background-position: left ;
-webkit-animation: slide 110s linear infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes slide {
from { background-position: left 100%; }
to { background-position: right 100%; }
}
@-moz-keyframes slide {
from { background-position:50% 50%; }
to { background-position: 50% 50%; }
}
.block {
position:absolute;
border-radius: 100%;
height:50px;
width:50px;
background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Topological_vector_space_illust.svg/2000px-Topological_vector_space_illust.svg.png');
margin-left:20px;
padding:10px;
background-size: contain;
z-index:99999999;
}
.block:odd {
background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Topological_vector_space_illust.svg/2000px-Topological_vector_space_illust.svg.png');
position:absolute;
height:12px;
width:60px;
margin-right:20px;
padding:10px;
background-size: contain;
z-index:99999999;
opacity: 0.8;
}
.boy {position:static;}
.boy img {
left:0;
bottom: 0;
height:90px;
position:absolute;
}
.bubble {
position: relative;
width: 180px;
height: 60px;
padding: 0px;
background: #98B51F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #98B51F transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 75px;
}
/*Front Row*/
.blade1, .blade2, .blade3, .blade4, .blade5,
.blade6, .blade7, .blade8, .blade9, .blade10,
.blade11, .blade12, .blade13, .blade14, .blade15,
.blade16, .blade17, .blade18, .blade19, .blade20,
.blade21, .blade22, .blade23, .blade24, .blade25,
.blade26, .blade27, .blade28, .blade29, .blade30,
.blade31, .blade32, .blade33, .blade34, .blade35,
.blade36, .blade37, .blade38, .blade39, .blade40,
.blade41, .blade42, .blade43, .blade44, .blade45{
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #156A32;
position: absolute;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
z-index: 7;
bottom: 0px;
}
.blade1 {left: 0px;}
.blade2 {left: 25px;}
.blade3 {left: 50px;}
.blade4 {left: 75px;}
.blade5 {left: 100px;}
.blade6 {left: 125px;}
.blade7 {left: 150px;}
.blade8 {left: 175px;}
.blade9 {left: 200px;}
.blade10 {left: 225px;}
.blade11 {left: 250px;}
.blade12 {left: 275px;}
.blade13 {left: 300px;}
.blade14 {left: 325px;}
.blade15 {left: 350px;}
.blade16 {left: 375px;}
.blade17 {left: 400px;}
.blade18 {left: 425px;}
.blade19 {left: 450px;}
.blade20 {left: 475px;}
.blade21 {left: 500px;}
.blade22 {left: 525px;}
.blade23 {left: 550px;}
.blade24 {left: 575px;}
.blade25 {left: 600px;}
.blade26 {left: 625px;}
.blade27 {left: 650px;}
.blade28 {left: 675px;}
.blade29 {left: 700px;}
.blade30 {left: 725px;}
.blade31 {left: 750px;}
.blade32 {left: 775px;}
.blade33 {left: 800px;}
.blade34 {left: 825px;}
.blade35 {left: 850px;}
.blade36 {left: 875px;}
.blade37 {left: 900px;}
.blade38 {left: 925px;}
.blade39 {left: 950px;}
.blade40 {left: 975px;}
.blade41 {left: 1000px;}
.blade42 {left: 1025px;}
.blade43 {left: 1050px;}
.blade44 {left: 1075px;}
.blade45 {left: 1100px;}
@-webkit-keyframes mymove {
0% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #156A32; }
25% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #156A32; }
50% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #156A32; }
75% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #156A32; }
100% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #156A32; }
}
/*Back Row*/
.blade1b, .blade2b, .blade3b, .blade4b, .blade5b,
.blade6b, .blade7b, .blade8b, .blade9b, .blade10b,
.blade11b, .blade12b, .blade13b, .blade14b, .blade15b,
.blade16b, .blade17b, .blade18b, .blade19b, .blade20b,
.blade21b, .blade22b, .blade23b, .blade24b, .blade25b,
.blade26b, .blade27b, .blade28b, .blade29b, .blade30b,
.blade31b, .blade32b, .blade33b, .blade34b, .blade35b,
.blade36b, .blade37b, .blade38b, .blade39b, .blade40b,
.blade41b, .blade42b, .blade43b, .blade44b, .blade45b {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #1E4018;
position: absolute;
-webkit-animation: mymoveb 5s infinite;
animation: mymoveb 5s infinite;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
z-index: 5;
bottom: 0px;
}
.blade1b {left: 15px;}
.blade2b {left: 35px;}
.blade3b {left: 65px;}
.blade4b {left: 85px;}
.blade5b {left: 115px;}
.blade6b {left: 135px;}
.blade7b {left: 165px;}
.blade8b {left: 185px;}
.blade9b {left: 215px;}
.blade10b {left: 235px;}
.blade11b {left: 265px;}
.blade12b {left: 285px;}
.blade13b {left: 315px;}
.blade14b {left: 335px;}
.blade15b {left: 365px;}
.blade16b {left: 385px;}
.blade17b {left: 415px;}
.blade18b {left: 435px;}
.blade19b {left: 465px;}
.blade20b {left: 485px;}
.blade21b {left: 515px;}
.blade22b {left: 535px;}
.blade23b {left: 565px;}
.blade24b {left: 585px;}
.blade25b {left: 615px;}
.blade26b {left: 635px;}
.blade27b {left: 665px;}
.blade28b {left: 685px;}
.blade29b {left: 715px;}
.blade30b {left: 735px;}
.blade31b {left: 765px;}
.blade32b {left: 785px;}
.blade33b {left: 815px;}
.blade34b {left: 835px;}
.blade35b {left: 865px;}
.blade36b {left: 885px;}
.blade37b {left: 915px;}
.blade38b {left: 935px;}
.blade39b {left: 965px;}
.blade40b {left: 985px;}
.blade41b {left: 1015px;}
.blade42b {left: 1035px;}
.blade43b {left: 1065px;}
.blade44b {left: 1085px;}
.blade45b {left: 1115px;}
@-webkit-keyframes mymoveb {
0% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #1E4018; }
25% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #1E4018; }
50% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #1E4018; }
75% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #1E4018; }
100% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #1E4018; }
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
function ran(min, max)
{
return Math.floor(Math.random() * (max - min ++ )) + min;
}
function moveBlock()
{
$(".block").each(function() {
x = ran(19, 97);
y = ran(9, 73);
pos = $(this).position();
nowX = pos.left + x;
nowY = pos.top + y;
$(this).delay(0)
.animate({left: nowX, top: nowY}, {duration:3400, easing: 'linear', complete:moveBlock});
});
}
moveBlock();
function moveBlockother()
{
$(".block:odd").each(function() {
x = ran(45, 90 + 70);
y = ran(x, 123);
pos = $(this).position();
nowX = pos.left + x;
nowY = pos.top + y;
$(this).delay(0)
.animate({top: x, right: nowY + pos }, {duration:2000, easing: 'swing', complete:moveBlockother});
});
}
$(document).mousemove(function(e){
$(".boy img").animate({left:e.pageX, right:e.pageY}, {duration:100, easing: 'swing', complete:moveBlock});
});
function moveBack()
{
$(document).ready(function() {
$('.baby').animate({left: 6610, top: 0}, {duration:25400, easing: 'swing', complete:moveBack});
});
}
moveBack();
moveBlockother();
moveBlock();
</script></body>
</html>
Raw
jsbin.yuleri.css
.grass {
background: bottom left;
height:140px;
width:100%;
left: 0;
top:0;
background-size: contain;
position: absolute;
}
.circle
{
position:absolute;
background: white;
height:100%;
width:100%;
opacity: 0.1;
background-size:contain;
background-repeat: no-repeat;
background-size:contain;
}
.circletwo
{
position:absolute;
background: url(
http://iphonewallpapers-hd.com/walls/3d_art_fire_smoke_wallpaper-other.jpg);
height:100%;
width: 550px;
opacity: 0.1;
background-size:100%;
background-repeat: no-repeat;
z-index:99999999!important;
}
.circle:nth-child(2) {
background: #ff0000!important;
}
.circle:nth-child(3) {
background: #34495e!important;
}
.circle:odd {
background: #347795!important;
}
body {
overflow: hidden;
}
div#steam {
height: 100%;
width: 100%;
background-size: contain;
background-image: url('http://pixelnest.io/tutorials/2d-game-unity/background-and-camera/-img/background.png');
background-repeat: repeat-x;
background-position: left ;
-webkit-animation: slide 110s linear infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes slide {
from { background-position: left 100%; }
to { background-position: right 100%; }
}
@-moz-keyframes slide {
from { background-position:50% 50%; }
to { background-position: 50% 50%; }
}
.block {
position:absolute;
border-radius: 100%;
height:50px;
width:50px;
background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Topological_vector_space_illust.svg/2000px-Topological_vector_space_illust.svg.png');
margin-left:20px;
padding:10px;
background-size: contain;
z-index:99999999;
}
.block:odd {
background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Topological_vector_space_illust.svg/2000px-Topological_vector_space_illust.svg.png');
position:absolute;
height:12px;
width:60px;
margin-right:20px;
padding:10px;
background-size: contain;
z-index:99999999;
opacity: 0.8;
}
.boy {position:static;}
.boy img {
left:0;
bottom: 0;
height:90px;
position:absolute;
}
.bubble {
position: relative;
width: 180px;
height: 60px;
padding: 0px;
background: #98B51F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #98B51F transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 75px;
}
/*Front Row*/
.blade1, .blade2, .blade3, .blade4, .blade5,
.blade6, .blade7, .blade8, .blade9, .blade10,
.blade11, .blade12, .blade13, .blade14, .blade15,
.blade16, .blade17, .blade18, .blade19, .blade20,
.blade21, .blade22, .blade23, .blade24, .blade25,
.blade26, .blade27, .blade28, .blade29, .blade30,
.blade31, .blade32, .blade33, .blade34, .blade35,
.blade36, .blade37, .blade38, .blade39, .blade40,
.blade41, .blade42, .blade43, .blade44, .blade45{
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #156A32;
position: absolute;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
z-index: 7;
bottom: 0px;
}
.blade1 {left: 0px;}
.blade2 {left: 25px;}
.blade3 {left: 50px;}
.blade4 {left: 75px;}
.blade5 {left: 100px;}
.blade6 {left: 125px;}
.blade7 {left: 150px;}
.blade8 {left: 175px;}
.blade9 {left: 200px;}
.blade10 {left: 225px;}
.blade11 {left: 250px;}
.blade12 {left: 275px;}
.blade13 {left: 300px;}
.blade14 {left: 325px;}
.blade15 {left: 350px;}
.blade16 {left: 375px;}
.blade17 {left: 400px;}
.blade18 {left: 425px;}
.blade19 {left: 450px;}
.blade20 {left: 475px;}
.blade21 {left: 500px;}
.blade22 {left: 525px;}
.blade23 {left: 550px;}
.blade24 {left: 575px;}
.blade25 {left: 600px;}
.blade26 {left: 625px;}
.blade27 {left: 650px;}
.blade28 {left: 675px;}
.blade29 {left: 700px;}
.blade30 {left: 725px;}
.blade31 {left: 750px;}
.blade32 {left: 775px;}
.blade33 {left: 800px;}
.blade34 {left: 825px;}
.blade35 {left: 850px;}
.blade36 {left: 875px;}
.blade37 {left: 900px;}
.blade38 {left: 925px;}
.blade39 {left: 950px;}
.blade40 {left: 975px;}
.blade41 {left: 1000px;}
.blade42 {left: 1025px;}
.blade43 {left: 1050px;}
.blade44 {left: 1075px;}
.blade45 {left: 1100px;}
@-webkit-keyframes mymove {
0% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #156A32; }
25% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #156A32; }
50% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #156A32; }
75% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #156A32; }
100% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #156A32; }
}
/*Back Row*/
.blade1b, .blade2b, .blade3b, .blade4b, .blade5b,
.blade6b, .blade7b, .blade8b, .blade9b, .blade10b,
.blade11b, .blade12b, .blade13b, .blade14b, .blade15b,
.blade16b, .blade17b, .blade18b, .blade19b, .blade20b,
.blade21b, .blade22b, .blade23b, .blade24b, .blade25b,
.blade26b, .blade27b, .blade28b, .blade29b, .blade30b,
.blade31b, .blade32b, .blade33b, .blade34b, .blade35b,
.blade36b, .blade37b, .blade38b, .blade39b, .blade40b,
.blade41b, .blade42b, .blade43b, .blade44b, .blade45b {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #1E4018;
position: absolute;
-webkit-animation: mymoveb 5s infinite;
animation: mymoveb 5s infinite;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
z-index: 5;
bottom: 0px;
}
.blade1b {left: 15px;}
.blade2b {left: 35px;}
.blade3b {left: 65px;}
.blade4b {left: 85px;}
.blade5b {left: 115px;}
.blade6b {left: 135px;}
.blade7b {left: 165px;}
.blade8b {left: 185px;}
.blade9b {left: 215px;}
.blade10b {left: 235px;}
.blade11b {left: 265px;}
.blade12b {left: 285px;}
.blade13b {left: 315px;}
.blade14b {left: 335px;}
.blade15b {left: 365px;}
.blade16b {left: 385px;}
.blade17b {left: 415px;}
.blade18b {left: 435px;}
.blade19b {left: 465px;}
.blade20b {left: 485px;}
.blade21b {left: 515px;}
.blade22b {left: 535px;}
.blade23b {left: 565px;}
.blade24b {left: 585px;}
.blade25b {left: 615px;}
.blade26b {left: 635px;}
.blade27b {left: 665px;}
.blade28b {left: 685px;}
.blade29b {left: 715px;}
.blade30b {left: 735px;}
.blade31b {left: 765px;}
.blade32b {left: 785px;}
.blade33b {left: 815px;}
.blade34b {left: 835px;}
.blade35b {left: 865px;}
.blade36b {left: 885px;}
.blade37b {left: 915px;}
.blade38b {left: 935px;}
.blade39b {left: 965px;}
.blade40b {left: 985px;}
.blade41b {left: 1015px;}
.blade42b {left: 1035px;}
.blade43b {left: 1065px;}
.blade44b {left: 1085px;}
.blade45b {left: 1115px;}
@-webkit-keyframes mymoveb {
0% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #1E4018; }
25% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #1E4018; }
50% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #1E4018; }
75% {
border-left: 25px solid transparent;
border-right: 10px solid transparent;
border-bottom: 55px solid #1E4018; }
100% {
border-left: 10px solid transparent;
border-right: 25px solid transparent;
border-bottom: 55px solid #1E4018; }
}
Raw
jsbin.yuleri.js
function ran(min, max)
{
return Math.floor(Math.random() * (max - min ++ )) + min;
}
function moveBlock()
{
$(".block").each(function() {
x = ran(19, 97);
y = ran(9, 73);
pos = $(this).position();
nowX = pos.left + x;
nowY = pos.top + y;
$(this).delay(0)
.animate({left: nowX, top: nowY}, {duration:3400, easing: 'linear', complete:moveBlock});
});
}
moveBlock();
function moveBlockother()
{
$(".block:odd").each(function() {
x = ran(45, 90 + 70);
y = ran(x, 123);
pos = $(this).position();
nowX = pos.left + x;
nowY = pos.top + y;
$(this).delay(0)
.animate({top: x, right: nowY + pos }, {duration:2000, easing: 'swing', complete:moveBlockother});
});
}
$(document).mousemove(function(e){
$(".boy img").animate({left:e.pageX, right:e.pageY}, {duration:100, easing: 'swing', complete:moveBlock});
});
function moveBack()
{
$(document).ready(function() {
$('.baby').animate({left: 6610, top: 0}, {duration:25400, easing: 'swing', complete:moveBack});
});
}
moveBack();
moveBlockother();
moveBlock();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment