[JS]スマホやタブレットにも完全対応!垂直・水平方向にパララックス スクロールさせる軽量スクリプト -paroller.js

ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。

モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示させたりできます。

デモのキャプチャ

paroller.js
paroller.js -GitHub

paroller.jsのデモ

デモでは、垂直・水平方向のパララックスを楽しめます。
スマホでもパララックスは楽しめましたが、レイアウトが対応されていないようです。

デモのキャプチャ

デモ: 垂直方向のパララックス

親コンテナいっぱいの背景をパララックスさせたデモで、1つ目と2つ目では係数が異なります。

デモのキャプチャ

デモ: 垂直方向のパララックス

カード型のコンポーネントは、スクロールに連動して上下にずらしながら表示されます。

デモのキャプチャ

デモ: 水平方向のパララックス

水平方向では、スクロールに連動して水平方向にパララックスします。

デモのキャプチャ

デモ: 水平方向のパララックス

カードも水平に移動し、アコーディオンのような動きで面白いです。

paroller.jsの使い方

Step 1: 外部ファイル

当スクリプトとjQueryを外部ファイルとして記述します。

Step 2: HTML

デモの最初にある、垂直方向のパララックスのコードです。親コンテナのdiv要素に画像を背景で指定し、それをアニメーションさせます。

Step 3: JavaScript

jQueryのセレクタでパララックスさせる要素を指定し、スクリプトを実行します。

パララックスの挙動は、HTMLにdata属性として記述することも可能です。

top of page

©2017 coliss