Skip to content

Instantly share code, notes, and snippets.

@hujuu

hujuu/Tower-in-Noise.markdown

Created January 26, 2014 11:31
Show Gist options
  • Save hujuu/8631363 to your computer and use it in GitHub Desktop.
Save hujuu/8631363 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Ken Nakai.
Raw
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The TV</title>
</head>
<body onload="config()">
<div id="boxA" class="box" style="left: 200px" onmouseover="document.getElementById('boxA').r=100"></div>
<div id="boxB" class="box" style="left: 200px" onmouseover="document.getElementById('boxB').r=100"></div>
<div id="boxC" class="box" style="left: 200px" onmouseover="document.getElementById('boxC').r=100"></div>
<div id="boxD" class="box" style="left: 200px" onmouseover="document.getElementById('boxD').r=100"></div>
<div id="boxE" class="box" style="left: 200px" onmouseover="document.getElementById('boxE').r=100"></div>
<div id="boxF" class="box" style="left: 200px" onmouseover="document.getElementById('boxF').r=100"></div>
<div id="boxG" class="box" style="left: 200px" onmouseover="document.getElementById('boxG').r=100"></div>
<div id="boxH" class="box" style="left: 200px" onmouseover="document.getElementById('boxH').r=100"></div>
<div id="title"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hujuu/20140126/20140126195636.png" alt="Studio Shark" /></div>
</body>
</html>
Raw
script.js
var motionCenter = 200;
var accel = 0.975;
function moveBox(moveObj) {
var myR = document.getElementById(moveObj).r;
var myAngle = document.getElementById(moveObj).angle;
var myLeft = myR * Math.cos(myAngle / 180 * Math.PI) + motionCenter;
document.getElementById(moveObj).style.left = myLeft + "px";
document.getElementById(moveObj).angle += document.getElementById(moveObj).speed;
document.getElementById(moveObj).r *= accel;
var comText = 'moveBox(\"' + moveObj + '\")';
setTimeout(comText,10);
}
function config(){
objList = new Array('boxA','boxB','boxC','boxD','boxE','boxF','boxG','boxH');
for (var i=0; i<objList.length; i++) {
e = document.getElementById(objList[i]);
e.r = 200;
e.angle = 90;
e.speed = (Math.random() * 4) - 2;
moveBox(objList[i]);
}
}
Raw
style.css
body {
background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/hujuu/20140126/20140126200700.gif);
background-repeat: repeat-x;
background-color: #000000;
position:absolute;
}
.box {
height: 50px;
width: 500px;
position: absolute;
}
#boxA {
background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/hujuu/20140126/20140126195637.png);
top: 0px;
}
#boxB {
background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/hujuu/20140126/20140126195638.png);
top: 50px;
}
#boxC {
background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/hujuu/20140126/20140126195639.png);
top: 100px;
}
#boxD {
background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/hujuu/20140126/20140126195640.png);
top: 150px;
}
#boxE {
background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/hujuu/20140126/20140126195641.png);
top: 200px;
}
#boxF {
background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/hujuu/20140126/20140126195642.png);
top: 250px;
}
#boxG {
background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/hujuu/20140126/20140126195643.png);
top: 300px;
}
#boxH {
background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/hujuu/20140126/20140126195644.png);
top: 350px;
}
#title {
top: 400px;
position: absolute;
left: 200px;
background-color:#000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment