たった数行でパララックス（視差効果）を実装する方法【jQuery】

WEBページの表現方法のひとつ「パララックス」の実装方法を紹介。

• コンテンツのボリュームがそれほど多くない。
• シンプルに実装したい

そんな人向けの内容となっています。

パララックスとは？

スクロールすると、背景や画像・テキストが時間差で移動して見える事で起きる「視差効果」による奥行きを表現するテクニックです。

これが実にシンプルに実装できてしまうんですね。

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

デモ

パララックスのサンプルコード

HTML

<div id="parallax-bg1" class="bg_container">
<!-- 空 -->
</div>
<div id="parallax-bg2" class="bg_container">
    <img src="images/anthropomorphic-1297542_640.png" alt="" width="400" />
</div>
<div id="parallax-bg3" class="bg_container">
    <img src="images/rocket-1717160_640.png" alt="" width="500" />
</div>

CSS

.bg_container {
    position: fixed;
	top: 0;
    left: 0;
	width: 100%;
    height: 100%;
}
#parallax-bg1 {
	z-index: 1;
    background: url(images/milky-way-1049493_s.jpg) center 0 / cover;
}
#parallax-bg2 {
	z-index: 2;
}
#parallax-bg2 img {
    position: absolute;
    left: 40%;
    top: 20%;
}
#parallax-bg3 {
	z-index: 3;
}
#parallax-bg3 img {
    position: absolute;
    left: 60%;
    top: 90%;
}

JS

    $(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 * .25) ) + 'px');
        $('#parallax-bg3').css('top', ( 0 - (scrolled * .5) ) + 'px');
    };