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

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

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

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

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

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

simpleParallax.jsとは

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

特徴

  • vanilla JS製で他ライブラリに依存しない
  • CSSハードウェアアクセラレーションの考慮
  • 画像がターゲットで、余計なHTML要素を書かない

simpleParallax.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/simple-parallax-js@5.1.0/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要素を生成してくれるからだ。

設定する

nametypedefaulthint
orientationstringupuprightdownleftup leftup rightdown leftleft right
scaleint1.21.0以上を指定
overflowbooleanfalse梱包要素からはみ出すか否か
delayint0.4遅延は秒単位で指定
transitionstring‘cubic-bezier(0,0,0,1)’任意のトランジション指定
breakpointintfalseブレークポイントはピクセル指定

右方向にする設定例

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

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です