Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<title>rotateToSpread</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
body {
background-color: #333;
}
.wrapper {
width: 200px;
height: 500000px;
}
.pillarsContainer {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 230px;
opacity: .9;
transform-origin: 100% 100%;
}
.pillar {
position: fixed;
top: 350px;
left: 50px;
width: 0;
height: 300px;
z-index: 1;
}
.pillar:hover {
z-index: 2;
}
.rotateImg {
width: 600px;
border: #ccc 4px solid;
opacity: .6;
transition: width ease 0.3s;
}
.rotateImg:hover {
width: 800px;
opacity: 1;
}
.reverseRotation {
display: block;
margin: 0 auto;
width: 120px;
height: 55px;
border-radius: 10px;
background-color: #20b2aa;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 52px;
cursor: pointer;
}
@media screen and (min-width:0px) and (max-device-width: 400px){
.rotateImg {
width: 200px;
}
.rotateImg:hover {
width: 300px;
opacity: 1;
}
}
</style>
</head>
<body>
<div id="wrapper" class="wrapper">
<div id="pillarsContainer" class="pillarsContainer"></div>
</div>
<script>
$(document).ready(function(){
var log = function(x) {console.log(x);}
var pillarSize = 6;
var bgColors = ['#c0392b','#2980b9', '#f39c12','#27ae60','#8e44ad','#31a9b8'],
degs = [60, 120, 180, 240, 300, 360],
imgs = ['1','2','3','4','sumidaRiver','5'];
var pillarStyle = function(x) {
return {
'background-color' : bgColors[x],
'transform' : 'rotateZ(' + degs[x] + 'deg)',
'transform-origin' : '30px 0'
}
}
var pillarAttr = function(x) {
return {
'id' : 'pillar' + (x+1),
'class' : 'pillar'
}
};
var pillaCon = $('#pillarsContainer');
for(var i = 0; i < pillarSize ; i++) {
var pillar = $('<div />').attr(pillarAttr(i)).css(pillarStyle(i));
var img = $('<img>').attr({
'src' : 'images/'+imgs[i]+'.jpg',
'class' : 'rotateImg'
});
pillaCon.append(pillar.append(img));
}
$(window).scroll(function(){
var scroll = $(this).scrollTop()/10;
pillaCon.css({
'transform' : 'rotateZ('+scroll+'deg)',
'transform-origin' : '80px 350px'
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment