2019.07.23

パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方

パララックス効果は数年前にトレンドとなって、いまでもWebデザインの表現に欠かせない要素のひとつであるが、しかしその表現はさまざまで、複雑さを増している印象がある。

そんな影響を受けてかパララックスライブラリも高機能になっていき、使いにくい状況になってしまっている。さらにサイト設計に関わるJavaScriptフレームワーク(ライブラリ)との依存性も考えなければならない。

そのような訳で、パララックスの実装に苦手意識をもっていないだろうか？できれば、「パララックス効果を含んだデザインを入稿しないでね」って具合に。

でも大丈夫。実装がとても簡単なJavaScriptライブラリがある。

このエントリーでは、パララックス効果を与えるJavaScriptライブラリ「simpleParallax.js」を紹介したい。

simpleParallax.jsとは

パララックス効果を与えるJavaScriptライブラリ。simpleParallax.jsはvanilla JS製で、他フレームワークやライブラリに依存することはなく実装できる。vanilla JS製であることからわかるとおり、非常に軽量であることとシンプル実装が特徴だ。

それではsimpleParallax.jsのインストール方法と使い方について話そう。

公式サイトからダウンロード

https://simpleparallax.com/

npm (or yarn) でインストール

$ npm install simple-parallax-js
# or
$ yarn add simple-parallax-js

CDNで読み込む jsDelivr

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simpleParallax.min.js"></script>

HTML

<img class="thumbnail" src="image.jpg" alt="image">

JavaScript

var image = document.querySelectorAll('.thumbnail');
new simpleParallax(image);

以上だ。これでパララックス効果が付与される。画像を梱包するHTML要素はいらない。simpleParallax.jsが梱包div要素を生成してくれるからだ。

name	type	default	hint
orientation	string	up	up – right – down – left – up left – up right – down left – left right
scale	int	1.2	1.0以上を指定
overflow	boolean	false	梱包要素からはみ出すか否か
delay	int	0.4	遅延は秒単位で指定
transition	string	‘cubic-bezier(0,0,0,1)’	任意のトランジション指定
breakpoint	int	false	ブレークポイントはピクセル指定

右方向にする設定例

var image = document.querySelectorAll('.thumbnail');
new simpleParallax(image, {
  orientation: 'right'
});

以上がsimpleParallax.jsの紹介だ。設定項目が少ないにも関わらず、およそパターンに対応できるように思う。orientationやdelay、transitionあたりがキモとなるかもしれない。状況によって組み合わせてみてほしい。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。