jQuery

【jQuery】シンプルなjQueryパララックスプラグインSparallax

January 5, 2017
Sparallax

Sparallaxはビューポート内の要素の位置に基づいたパララックス効果。

init

<!-- sparallax requires jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.sparallax.js" type="text/javascript"></script>

optimization

<!-- add this css snippet to your 'main.css' file or top of the body. -->
<style>
    .sparallax {
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transition: all 0.1s ease;
        transform: translateZ(0);
    }
</style>

standard

<!-- data-sparallax-limits="yUpper(px), yLower(px)" -->
<div class="sparallax" data-sparallax-limits="-50, 50">
    <elem></elem>
</div>

reverse

<!-- data-sparallax-limits="yUpper(px), yLower(px)" -->
<div class="sparallax sparallax-reverse" data-sparallax-limits="-50, 50">
    <elem></elem>
</div>

MIT