パララックスとは、視差効果を使って奥行きを出す表現のことです。
よくいろんなサイトで使われるのは、マウスやスクロールによって、要素が時間差で動くことにより奥行きを感じさせます。
そのサンプルを一つ載せます。
マウスオーバーの位置を拾って、重なったdiv要素を横に移動させます。
スマホはマウスオーバーができないので、クリックでアニメーションがスタートするようにしました。
JS
$('.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>
