chuck0523/rotateZPhotos.html

## rotateZPhotos.html
<!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>
	<!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>