Skip to content

Instantly share code, notes, and snippets.

@chuck0523

chuck0523/rotateBoxes9.html

Created August 10, 2015 13:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chuck0523/89d0dadcb29c356fb5d3 to your computer and use it in GitHub Desktop.
Save chuck0523/89d0dadcb29c356fb5d3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rotateBoxes9.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="author" content="chuck">
<meta name="generator" content="Text(chromeApp)">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<title>Rotate boxes</title>
<link rel="stylesheet" type="text/css" href="rotateBoxes9.css">
<script src="jquery.min.js"></script>
</head>
<body>
<button id="startButton" class="startButton">START</button>
<div class="stage">
<div class="cube">
<div class="cube1">(o・ω・o)</div>
<div class="cube2">( ・ω・ )</div>
<div class="cube3">(´；ω；｀)</div>
<div class="cube4">(｀・ω・´)</div>
<div class="cube5">(# ﾟДﾟ)</div>
<div class="cube6">ヽ(｀Д´#)ﾉ</div>
<div class="cube7">(・∀・)</div>
<div class="cube8">ヽ(=´▽`=)ﾉ</div>
</div>
<div class="cube">
<div class="cube1">(o・ω・o)</div>
<div class="cube2">( ・ω・ )</div>
<div class="cube3">(´；ω；｀)</div>
<div class="cube4">(｀・ω・´)</div>
<div class="cube5">(# ﾟДﾟ)</div>
<div class="cube6">ヽ(｀Д´#)ﾉ</div>
<div class="cube7">(・∀・)</div>
<div class="cube8">ヽ(=´▽`=)ﾉ</div>
</div>
<div class="cube">
<div class="cube1">(o・ω・o)</div>
<div class="cube2">( ・ω・ )</div>
<div class="cube3">(´；ω；｀)</div>
<div class="cube4">(｀・ω・´)</div>
<div class="cube5">(# ﾟДﾟ)</div>
<div class="cube6">ヽ(｀Д´#)ﾉ</div>
<div class="cube7">(・∀・)</div>
<div class="cube8">ヽ(=´▽`=)ﾉ</div>
</div>
<div class="screenEdge"></div>
</div>
<script>
$(document).ready(function(){
var log = function(x){console.log(x);}
var centering = function() {
var winW = $(window).width(),
conW = $('.cube').width()*3;
$('.stage').css('left', (winW-conW)/2);
};
centering();
var st = 0;
$('#startButton').click(function(){
for(var i = 0; i < 3; i++) {
do {
var ran = Math.floor(Math.random()*10);
st += 1800 + ran*45;
} while(ran == 8 || ran == 9);
$('.cube').eq(i).css({
'-webkit-transform' : 'rotateX('+ st +'deg)',
'transform' : 'rotateX('+ st +'deg)'
});
}
});
$(window).scroll(function(){
var st = $(window).scrollTop();
st = Math.floor(st/2);
$('.cube').css({
'-webkit-transform' : 'rotateX('+ st +'deg)',
'transform' : 'rotateX('+ st +'deg)'
});
});
$(window).resize(function(){
centering();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment