パララックスもこれで簡単に! HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js

ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。

実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。

パララックスもこれで簡単に! HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js

simpleParallax.js
simpleParallax.js -GitHub

simpleParallax.jsの特徴

simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。

サイトのキャプチャ

simpleParallax.js

パララックスのエフェクトは直接<img>タグに適用されるので、背景画像を使用する必要はありません。詳しくは、下記をご覧ください。

サイトのキャプチャ

create a parallax effect directly on tags with JavaScript

simpleParallax.jsのデモ

デモではsimpleParallax.jsで実装されたさまざまなパララックスを楽しめます。

サイトのキャプチャ

デモ -simpleParallax.js: Basic config

デフォルトのパララックスは、下にスクロールすると画像が下から上に移動し、上にスクロールすると画像が上から下に移動します。エフェクトは画像タグに適用されるため、背景画像を用意する必要はありません。

サイトのキャプチャ

デモ -simpleParallax.js: with a different direction

視差効果は上下左右に適用でき、2つの方向を組み合わせることもできます。右下だと斜めに移動します。

サイトのキャプチャ

デモ -simpleParallax.js: with a higher scale

<img>で配置された画像を動かすと空白ができてしまうのでは、と心配しなくて大丈夫です。画像はスケーリング変換され、ページの初期レイアウトを変更しないまま適用できます。

サイトのキャプチャ

デモ -simpleParallax.js: with overflow

デフォルトではオーバーフローしないように視差効果が適用されますが、overflow: trueにすると自然なフローで視差効果を適用できます。

サイトのキャプチャ

遅延も設定でき、ユーザーがスクロールを停止すると、その遅延の時間分だけ視差効果が続きます。コンマ何秒に設定するだけで、動きが全然変わります。

デモ -simpleParallax.js: with delay and transition

サイトのキャプチャ

デモ -simpleParallax.js: with maxTransition

maxTransitionは指定されたパーセントの後に視差効果を停止します。デフォルトでは、ビューポートの0%から100%に変換されます。

simpleParallax.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

スクリプトは、CDNでも提供されています。

npm / yarnからインストールすることもできます。

次に、インポートします。

Step 2: HTML

画像を配置する<img>は通常通りに実装し、JavaScriptで参照できるようにclassやidを与えます。

Step 3: JavaScript

あとは、以下のコードを追加するだけです。

複数の画像にパララックス効果を適用することもできます。

オプションなども豊富に用意されています。詳しくは、ドキュメントをご覧ください。

sponsors

top of page

©2022 coliss