jQueryでパララックス(視差効果)エフェクトとは?

パララックス効果とは、もともとはカメラ用語。
ファインダ越しで決めた構図と、実際に撮影された構図とで差が生じる現象のことを言う。
※カメラのレンズと、覗き込むファインダーの位置が違うため

例を挙げると、車や電車に乗っている時、手前の風景はものすごく早く流れていくのに対し、
遠くの風景はゆっくりと流れていくように見える。
これと同じように、WEBページでも背景の流れるスピードを要素毎に変化をつけることで、
奥行き感を演出することができる。

さらに言うと、奥にある要素(画像など)は、ぼかしたりすると、より奥行きが出てくる。
メインコンテンツより手前にあるようにしたい場合も若干ぼかすと良い。
これは、カメラのピンボケを意図的に演出することで、よりリアルに見えるようになる。

$(window).bind('scroll',function(e){
    parallaxScroll();
});
function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    $('#parallax-bg1').css('background-position-y', ( 0 - (scrolled * 0.1)) + 'px');
    $('#parallax-bg2').css('top', ( 0 - (scrolled * .5) ) + 'px');
    $('#parallax-bg3').css('top', ( 0 - (scrolled * .25) ) + 'px');
};

記事に戻る