横スクロールパララックスを表現するjQueryプラグイン「jInvertScroll.js」

スクロールすると、横方向に画像が移動しパララックスを表現をしてくれるjQueyプラグインの「jInvertScroll.js」をご紹介します。

1.jInvertScroll一式をダウンロード

jInvertScrollよりデータを一式ダウンロードします。

2.jQueryとjInvertScroll.jsを読み込みます。

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jInvertScroll.js"></script>

1 2	<script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.jInvertScroll.js"></script>

3.画像を3枚用意します。

▼ 一番後ろの画像（cloud.png）2500×500px

▼中間の画像（build.png）3000×500px

▼前面の画像（animal.png）2000×500px

4.HTMLを記述

<div class="animal scroll"><img src="images/animal.png" alt="" /></div>
<div class="build scroll"><img src="images/build.png" alt="" /></div>
<div class="cloud scroll"><img src="images/cloud.png" alt="" /></div>

5.CSSを記述

body {
  overflow-x: hidden;
  background: -webkit-linear-gradient(top, #88ebf7, #0e051e);
}
.scroll {
  position: fixed;
  bottom: 0;
  left: 0;
}
.cloud {
  z-index: 1;
  width: 2500px;
}
.build {
  z-index: 100;
  width: 3000px;
}
.animal {
  z-index: 200;
  width: 2000px;
}

body {

overflow-x: hidden;

background: -webkit-linear-gradient(top, #88ebf7, #0e051e);

}

.scroll {

position: fixed;

bottom: 0;

left: 0;

}

.cloud {

z-index: 1;

width: 2500px;

}

.build {

z-index: 100;

width: 3000px;

}

.animal {

z-index: 200;

width: 2000px;

}

6.JavaScriptを記述

<script type="text/javascript">
    (function($) {
        $.jInvertScroll(['.scroll'],
            {
            height: 7000,
            onScroll: function(percent) {
                console.log(percent);
            }
        });
    }(jQuery));
</script>

(function($) {

$.jInvertScroll(['.scroll'],

{

height: 7000,

onScroll: function(percent) {

console.log(percent);

}

});

}(jQuery));

</script>

デモサンプル

以上になります。