jQuery

【jQuery】シンプルで軽いParallaxライブラリSimpleParallax.js

May 10, 2017
SimpleParallax.js

SimpleParallax.jsはシンプルで軽いParallaxライブラリ。

Usage

<link rel="stylesheet" href="css/simpleParallax.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/simpleParallax.min.js"></script>

<div class="parallax"
    data-parallax-axis="both"
    data-parallax-scope="global"
    data-parallax-detect="mouseover">
    <div class="parallax__item" data-parallax-depth="35">
        example
    </div>
    <div class="parallax__item" data-parallax-depth="10">
        example
    </div>
</div>

Parameters

Data Attribute Default
data-parallax-scope 'global'
data-parallax-axis 'both'
data-parallax-detect 'mouseover'
data-parallax-max-shift 1000
parallax-depth 1
parallax-offset-x 0
parallax-offset-y 0

MIT