ONZE/BLOGオンズ開発ブログ

今日はウェブサイトにお手軽にパララックス効果の画像を設置できるJavaScriptプラグイン［simpleParallax.js］の使い方を紹介します。
本体を読み込んで画像に任意のクラス名を指定すればスグに実装できます。

［simpleParallax.js］の特徴

［simpleParallax.js］はjQueryなどに依存せず、単体でパララックス効果を付与することができるJavaScriptライブラリです。
非常に軽量で、簡単に導入できるのが特徴。
オプション設定は少ないですが、クオリティが高いので充分に使えます。

データのダウンロードは下記公式サイトからどうぞ。

• simpleParallax.js
• Github

［simpleParallax.js］の実装方法

早速［simpleParallax.js］の使い方を紹介します。

インストール

まずは本体ファイルをインストールします。
CDNで提供されているので、そちらを利用するのが手っ取り早いでしょう。

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.1/dist/simpleParallax.min.js"></script>

上記のコードをHTMLの適当な箇所に記述します。
このプラグインはjQueryに依存します。HTML内でファイルを読み込む際には、先にjQueryの本体ファイルのURLを指定しておきましょう。

なおnpm経由でインストールする場合は次のコードを実行してください。

$ npm install simple-parallax-js

初期化

続いてはパララックス効果を適用させたい画像を用意します。
マークアップ方法は簡単で、パララックスを付与したい画像に任意のクラス名を追加するだけ。
ここでは仮にclass="thumbnail"を付与します。

HTML

HTMLの記述は次のとおり。

<img src="sample.jpg" alt="パララックス画像" class="thumbnail">

JavaScript

最後にJavaScriptで初期化を行います。

<script>
const image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);
</script>

基本的には上記で導入完了。ほとんど手間がかかりませんね。
簡単なサンプルを用意しましたので、以下のリンクから実際の挙動を確認できます。

サンプル：https://on-ze.com/demo/js-simpleparallax/

オプション設定

用意されているオプションの一覧です。

オプション設定の例

オプションの使い方の一例です。

var images = document.querySelectorAll('.thumbnail');
new simpleParallax(images, {
	orientation: 'down',
	scale: 1.2,
	overflow: true,
	delay: 0,
	transition:cubic-bezier(0,0,0,1),
	customContainer: '.container',
	customWrapper: '.wrapper'
});

注意点

［simpleParallax.js］はIEには対応していません。

ブラウザ対応

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari
no support	16+	55+	58+	12.1+	45+	12.2+

もしIE11でも動くようにしたい場合はpolyfillを使いましょう。

<script src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.closest%2CArray.from%2CIntersectionObserver%2CObject.assign%2CArray.prototype.includes%2CString.prototype.includes"></script>

Polyfill.ioから取得した上記のコードをHTMLに追記して読み込みます。
これでIE11でも［simpleParallax.js］を動かすことができます。

［simpleParallax.js］の公式サイトはこちらです。

• simpleParallax.js
• Github