パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
Post on:2022年1月12日
sponsors
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。
実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。
simpleParallax.js
simpleParallax.js -GitHub
simpleParallax.jsの特徴
simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。
パララックスのエフェクトは直接<img>タグに適用されるので、背景画像を使用する必要はありません。詳しくは、下記をご覧ください。
create a parallax effect directly on tags with JavaScript
simpleParallax.jsのデモ
デモではsimpleParallax.jsで実装されたさまざまなパララックスを楽しめます。
デモ -simpleParallax.js: Basic config
デフォルトのパララックスは、下にスクロールすると画像が下から上に移動し、上にスクロールすると画像が上から下に移動します。エフェクトは画像タグに適用されるため、背景画像を用意する必要はありません。
|
1 2 |
var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image); |
デモ -simpleParallax.js: with a different direction
視差効果は上下左右に適用でき、2つの方向を組み合わせることもできます。右下だと斜めに移動します。
|
1 2 3 4 |
var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image, { orientation: 'right' }); |
デモ -simpleParallax.js: with a higher scale
<img>で配置された画像を動かすと空白ができてしまうのでは、と心配しなくて大丈夫です。画像はスケーリング変換され、ページの初期レイアウトを変更しないまま適用できます。
|
1 2 3 4 |
var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image, { scale: 1.5 }); |
デモ -simpleParallax.js: with overflow
デフォルトではオーバーフローしないように視差効果が適用されますが、overflow: trueにすると自然なフローで視差効果を適用できます。
|
1 2 3 4 |
var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image, { overflow: true }); |
遅延も設定でき、ユーザーがスクロールを停止すると、その遅延の時間分だけ視差効果が続きます。コンマ何秒に設定するだけで、動きが全然変わります。
デモ -simpleParallax.js: with delay and transition
|
1 2 3 4 5 |
var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image, { delay: .6, transition: 'cubic-bezier(0,0,0,1)' }); |
デモ -simpleParallax.js: with maxTransition
maxTransitionは指定されたパーセントの後に視差効果を停止します。デフォルトでは、ビューポートの0％から100％に変換されます。
|
1 2 3 4 |
var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image, { maxTransition: 60 }); |
simpleParallax.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 |
<script src="simpleParallax.js"></script> |
スクリプトは、CDNでも提供されています。
|
1 |
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.5.1/dist/simpleParallax.min.js"></script> |
npm / yarnからインストールすることもできます。
|
1 2 3 4 5 |
// npm npm install simple-parallax-js // yarn yarn add simple-parallax-js |
次に、インポートします。
|
1 2 3 4 5 |
// ES6 import import simpleParallax from 'simple-parallax-js'; // CommonJS const simpleParallax = require('simple-parallax-js'); |
Step 2: HTML
画像を配置する<img>は通常通りに実装し、JavaScriptで参照できるようにclassやidを与えます。
|
1 |
<img class="thumbnail" src="image.jpg" alt="image"> |
Step 3: JavaScript
あとは、以下のコードを追加するだけです。
|
1 2 |
var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image); |
複数の画像にパララックス効果を適用することもできます。
|
1 2 |
var images = document.querySelectorAll('img'); new simpleParallax(images); |
オプションなども豊富に用意されています。詳しくは、ドキュメントをご覧ください。
sponsors
