パララックス、いいですよね。
少し平面的なデザイン・レイアウトに、パララックス効果を入れることで、「動き」と「奥行き」を出せるので、そんなことも考慮しつつ使ってみるのもオススメです。
そんな時JavaScriptのライブラリ「simplePARALLAX.js」で、簡単にパララックス効果をつけることができます。
この記事では、この「simplePARALLAX.js」についてご紹介していくので、ぜひ最後までご覧いただけたら嬉しいです。
目次
simplePARALLAX.js
「simplePARALLAX.js」は、簡単にパララックスエフェクトを使うことができるJavaScriptライブラリです。
パララックスとは、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること、または、その角度差のこと。
引用：Wikipedia より
「simplePARALLAX.js」は、サイズが5KB程度と軽量でネイティブなJavaScriptライブラリのため、動作も非常に軽くパララックスエフェクトを簡単に扱うことができるので、非常にオススメです。
公式サイト simplePARALLAX.js
使用方法
使用方法は、<head>〜〜</head>内にいずれかの方法で読み込ませるだけです。
読み込ませる方法は以下の通り、「ダウンロードして使用」か「CDNでの使用」のどちらかです。
<!-- ダウンロードして使用する場合 -->
<script src="simpleParallax.js"></script>
<!-- CDNで利用する場合 2022.8.7現在-->
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.5.1/dist/simpleParallax.min.js"></script>読み込みが完了したら、img タグに任意のclass名を追加して、次にJavaScriptのコードでオプションを記入するだけで利用可能です。
これだけでOKです。めちゃめちゃ簡単ですね。
利用可能なオプション
「simplePARALLAX.js」では、以下8つのオプションを利用可能です。
| オプション | 内容 |
|---|---|
| orientation | 視差効果の方向です。 例えば「上」を選択すると、画像が下から上に移動します。2つの方向を組み合わせると、画像は斜めに移動します。 |
| scale | 数値が高く設定されているほど、視差効果がより顕著になります。 |
| overflow | デフォルトでは、オーバーフロー（はみ出す）ことなく視差効果を適用されますが、overflowをオンにすることで、オーバーフローさせることができます。 |
| delay | スクロールを停止すると、少し遅延してパララックス効果が適用されます。遅延は秒単位で指定可能です。 |
| transition | CSSの「transition」が遅延設定に追加されるので、上記の「delay」設定と連携させて使います。 |
| customContainer | デフォルトの状態のパララックスの計算は、スクロールのパーセンテージで行われます。画像が独自のスクロール領域を持つ場合にはこのオプションで緻密な設定を行うことができます。 |
| customWrapper | 独自のラッパーを使用する場合のオプション。 |
| maxTransition | 任意のパーセンテージに変更できます。 |
これらのオプションは単独で使うのはもちろんですが、掛け合わせて使うことも可能です。詳しくは公式サイトに詳しくあるので、ぜひご覧なってみてください。
公式サイト simplePARALLAX.js
個人的には「delay」を使うとダイナミックになるので、好きです。
パララックスのサンプルとコード
「simplePARALLAX.js」を使ったサンプルは4つです。全て、スクロールインした時にアニメーション効果がついているので、順にご覧ください。
それぞれの「コードを表示」をクリックすると、当該のHTMLとJavaScriptのコードが見れます。
右から左右に
<img class="thumbnail1" src="https://dubdesign.net/wp-content/uploads/2022/06/cafe.jpg" alt="image">
<script>
var image1 = document.getElementsByClassName('thumbnail1');
new simpleParallax(image1, {
orientation: 'right'
});
</script>scaleで拡大して上から下
<img class="thumbnail2" src="https://dubdesign.net/wp-content/uploads/2022/07/001_building.jpg" alt="image">
<script>
var image2 = document.getElementsByClassName('thumbnail2');
new simpleParallax(image2, {
scale: 1.5
});
</script>overflowで左右にはみ出し
<img class="thumbnail3" src="https://dubdesign.net/wp-content/uploads/2022/07/002_building.jpg" alt="image">
<script>
var image3 = document.getElementsByClassName('thumbnail3');
new simpleParallax(image3, {
orientation: 'right',
overflow: true
});
</script>delayで時間差のあるアニメーション
<img class="thumbnail4" src="https://dubdesign.net/wp-content/uploads/2022/07/003_building.jpg" alt="image">
<script>
var image4 = document.getElementsByClassName('thumbnail4');
new simpleParallax(image4, {
delay: .6,
transition: 'cubic-bezier(0,0,0,1)'
});
</script>さいごに
いかがでしたでしょうか？
導入も手軽にパララックス効果を設定して使うことができる「simplePARALLAX.js」。ぜひ参考にして使ってみてください。
