[JS]スマホやタブレットにも完全対応！垂直・水平方向にパララックス スクロールさせる軽量スクリプト -paroller.js
Post on:2017年5月24日
sponsors
ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。
モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示させたりできます。
paroller.js
paroller.js -GitHub
paroller.jsのデモ
デモでは、垂直・水平方向のパララックスを楽しめます。
スマホでもパララックスは楽しめましたが、レイアウトが対応されていないようです。
親コンテナいっぱいの背景をパララックスさせたデモで、1つ目と2つ目では係数が異なります。
カード型のコンポーネントは、スクロールに連動して上下にずらしながら表示されます。
水平方向では、スクロールに連動して水平方向にパララックスします。
カードも水平に移動し、アコーディオンのような動きで面白いです。
paroller.jsの使い方
Step 1: 外部ファイル
当スクリプトとjQueryを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 |
<body> ... コンテンツ ... <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="dist/jquery.paroller.js"></script> </body> |
Step 2: HTML
デモの最初にある、垂直方向のパララックスのコードです。親コンテナのdiv要素に画像を背景で指定し、それをアニメーションさせます。
|
1 2 3 4 5 |
<div class="jumbotron text-center bg-faded my-5" style="background: url('http://lorempixel.com/1200/600/abstract/8') no-repeat center;"> <h1 class="heading-1 py-5 text-white">Hello Parallax!</h1> <p class="text-white">data-paroller-factor="0.5"</p> </div> |
Step 3: JavaScript
jQueryのセレクタでパララックスさせる要素を指定し、スクリプトを実行します。
|
1 2 3 4 5 6 7 8 9 |
<script> $(function () { $("element").paroller({ factor: 0.3, type: 'foreground', direction: 'horizontal' }); }); </script> |
パララックスの挙動は、HTMLにdata属性として記述することも可能です。
|
1 |
<div data-paroller-factor="0.3" data-paroller-type="foreground" data-paroller-direction="horizontal"></div> |
sponsors
