jQuery

【jQuery】ウェブページにパララックス背景スクロール効果を追加HTML Parallax Scrolling

November 15, 2018
HTML Parallax Scrolling

HTML Parallax Scrollingはウェブページにパララックス背景スクロール効果を追加するシンプルなJavascriptとCSS。

Markup

data-parallax-displacement要素はユーザーのスクロール量に対して動きを指定

<div id="clouds1" class="parallax-layer" data-parallax-displacement="0.025"></div>
<div id="clouds2" class="parallax-layer" data-parallax-displacement="0.05"></div>
<h1>Parallax</h1>
<img id="balloon" src="images/balloon.png" class="parallax-layer" data-parallax-displacement="0.1"/>

CSS

#clouds1 {
    position: fixed;
    background: center center repeat url('images/clouds1.png');
    opacity: 0.6;
    top: 0;
    left: 0;
    right: 0;
    height: 5000px;
    z-index: -2;
}

#clouds2 {
    position: fixed;
    background: center center repeat url('images/clouds2.png');
    opacity: 0.3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5000px;
    z-index: -1;
}

#balloon {
    ...
}

.parallax-layer {
    transition: transform 2s ease;
}

javascript

// cache the layer elements
var layers = $('.parallax-layer');

$(document)
    .on('scroll', function() {
        // the current vertical scroll offset,
        // capped to 0 for browsers that allow over-scrolling
        var scroll_offset = Math.max(0, $(document).scrollTop());

        // set the 'top' of each layer
        layers.each(function(i) {
            var displacement = $(this).data('parallax-displacement');
            var dy = Math.round(scroll_offset * -displacement);
            $(this).css('transform', 'translateY(' + dy + 'px)');
        });
    });