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