jQuery

【jQuery】軽量のパララックス背景プラグイン。EasyParallax

September 5, 2016
EasyParallax

EasyParallaxはパララックス背景を追加するための、軽量で使いやすいjQueryプラグイン。

jQuery

<script src="/path/to/js/files/jquery.js"></script>
<script src="/path/to/js/files/jquery.easyparallax-1.0.0.js"></script>

Simple usage

<div class="container" data-bg="/url/to/bg/image">
    Your content
</div>

<script>
    $('.container').easyParallax();
</script>

Options

Option name Default value
debug false
alignment ‘center’
effectAmount 400
effectThreshold 0
isReady

Responsive

<div class="container" data-bg="/url/to/bg/image1" data-bg500="/url/to/bg/image2" data-bg1000="/url/to/bg/image3"></div>

Full demonstration

// in .php  or .html file
<html>
    <head>
        <link rel="stylesheet" type="text/css" rel="/path/to/js/files/animate.css" />
        <style>
            .container {position:relative; width:100%; height:300px;}
            .easyparallax {opacity:0;}
        </style>
    </head>
    <body>
        <div class="container" 
            data-bg="/path/to/img/image1.jpg" 
            data-bg600="/path/to/img/image2.jpg"> 
        </div>

        <script src="/path/to/js/files/jquery.js"></script>
        <script src="/path/to/js/files/jquery.easyparallax-1.0.0.js"></script>
    </body>
</html>

// in .js attached file
$('.container').easyParallax({
    alignment : 'right',
    effectAmount : 280,
    effectThreshold : 600,
    isReady : function(){
        this.addClass('animated fadeIn');
    }
});