jQuery パララックス　簡易版

パララックスとは、視差効果を使って奥行きを出す表現のことです。

よくいろんなサイトで使われるのは、マウスやスクロールによって、要素が時間差で動くことにより奥行きを感じさせます。

そのサンプルを一つ載せます。

マウスオーバーの位置を拾って、重なったdiv要素を横に移動させます。

スマホはマウスオーバーができないので、クリックでアニメーションがスタートするようにしました。

$('.layer').each(function() {
	var layer = $(this);
	var z = layer.attr("z") * 0.1;
	
	var mcnt = 0;
	var my_left = parseInt(layer.css('left'), 10);
	
	stage_w = $('#demo_stage').width();
	stage_w2 = stage_w/2;

	$('#demo_stage').mousemove(function(mousEv) {
	
		parOffset = $(this).offset();
		mouseX = (mousEv.pageX - parOffset.left); //pos on stage
		mouseY = 0;

	
		if(mouseX < stage_w2){
		m = (stage_w2 - mouseX)*z;
		s = my_left + m;
		layer.animate({left: s }, 0); // just to remove shock on page load
		}else{
		m = (mouseX - stage_w2)*z;
		s = my_left - m;
		layer.animate({left: s }, 0); // just to remove shock on page load
		}
	
	});

});

CSS

#demo_stage{
	width: 280px;
	height: 250px;
	background: #CCC;
	position: absolute;
}

.demo_box {
	height: 200px;
	width: 200px;
	background: #0F0;
	top: 30px;
	left: 30px;
	position: absolute;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
}

.demo_box2 {
	height: 70px;
	width: 160px;
	background: #FF0;
	top:120px;
	left: 100px;
	position: absolute;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
}

.demo_box3 {
	height: 70px;
	width: 70px;
	background: #F0F;
	top: 150px;
	left: 70px;
	position: absolute;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
}

HTML

<div id="demo_stage">

	<div class="demo_box layer" z="1"></div>
	
	<div class="demo_box2 layer" z="2" ></div>
	
	<div class="demo_box3 layer" z="3" ></div>

</div>