BLOG

May 1, 2020

simplePARALLAX.jsで画像にパララックス効果を！

今でもけっこう見かけるパララックスを使ったWebサイトですが、今回紹介するJavaScriptライブラリを使えば、超簡単に画像に視差効果を適用することができます。その名は「simplePARALLAX.js」です。

パララックスと言えば、background-imageを使用するわけですが、このJavaScriptはimgタグに直接クラスを指定するだけでいいんです。それだけで、驚くほどスムーズなアニメーションを実現します。

まずはスクリプトを読み込みます。

<script src="simpleParallax.js"></script>

CDNの場合は以下のスクリプトを読み込みます。

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

パララックスを追加するには、画像に任意のクラスを記述します。

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

次にJavaScriptコードを追加します。

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

これだけでいいんです。

任意のパラメータも用意されていて、スクロールの方向などを選ぶこともできます。

方向を指定します。ディフォルトは「up」。up / right / down / left / up left / up right / down left / left rightが指定できます。方向を変える場合…

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

スケールを高く設定するほど、視差効果が高くなります。その代わり、画質は悪くなります。ディフォルトは「1.2」。スケールを上げる場合…

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
	scale: 1.5
});

デフォルトでは画像はオーバーフローしないようになっています。trueにすることで画像は枠を超えスクロールします。ディフォルトは「false」。trueにする場合…

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
	overflow: true
});

秒単位で延滞を設定できます。ディフォルトは「0.4」。

ディフォルトは「’cubic-bezier(0,0,0,1)’ 」。cubic-bezierはアニメーションの始まりや終わりを緩やかにするためによく使用されるもので、遅延設定と密接に連動します。delayとの併用方法は…

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
	delay: .6,
	transition: 'cubic-bezier(0,0,0,1)'
});

これを設定すれば、指定した%の後に動きが停止します。使い方は…

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
	maxTransition: 60
});

上記で説明したオプションの詳しいサンプルとコードは【こちらから】

簡単に設置できるので、Webサイトに動きをつけたいときなどお試しください。