三重県名張市伊賀市のホームページ制作/グラフィックデザイン

BLOG

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

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

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

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

デモは【こちらから】

ダウンロードは【こちらから】

simplePARALLAX.jsを設定する

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

<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);

これだけでいいんです。

オプションでカスタマイズ

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

orientation

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

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

scale

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

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

overflow

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

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

delay

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

transition

ディフォルトは「’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)'
});

maxTransition

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

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

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

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


関連するエントリー
ご相談・お見積り

制作のご相談・お見積り(無料)を
受け付けています。

制作についての不安や疑問など、どんなことでもお気軽にご相談ください。 制作会社様からの制作外注依頼もお待ちしております。

電話番号