たった数行でパララックス効果を演出する方法【jQuery】

パララックスとは？

ちまたで流行と噂のParallax（パララックス）。スクロールすると背景や画像などが時間差で移動することで、視差効果による奥行き感が表現できます。

スクロールすることで効果が現れるため、ページが長くなりやすいランディングページと結構相性が良いんじゃないかな、と考えています。

ここでは、比較的かんたんにパララックス効果を演出できる一番シンプルなコードを紹介します。

サンプルコード

<div id="parallax-bg1" class="bg_container"></div>
                    

$(window).bind('scroll',function(e){
    parallaxScroll();
});

function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    $('#parallax-bg1').css('background-position-y', ( 0 - (scrolled * 0.1)) + 'px');
};