[JS]デスクトップとスマホの両方に対応!さまざまなパララックススクロールを実装できるスクリプト -basicScroll

Webページやスマホアプリで、ユーザーがスクロールした位置に応じてCSSアニメーションを簡単に適用できるパララックススクロールを実装する軽量スクリプトを紹介します。

単体で動作するので、非常に便利だと思います。

サイトのキャプチャ

basicScroll
basicScroll -GitHub

basicScrollの特徴

basicScrollではスクロール位置に応じてCSSを変更でき、CSSの変数を利用してアニメーションを適用します。スクロールで同時に表示された要素に対しても別々のアニメーションを簡単に設定でき、JavaScriptを使用してアニメーションをさらに制御できます。

basicScrollの特徴

basicScrollの特徴

  • 他のスクリプトへの依存はゼロ
  • CommonJSとAMDのサポート
  • シンプルなJavaScript API
  • ブラウザのパフォーマンスに最適化された実装
  • デスクトップとスマホの両方をサポート

basicScrollのデモ

デモではbasicScrollの基本的な動作を確認できます。

デモのキャプチャ

デモページ: Default

スクロールに応じて、div要素の矩形にさまざまなアニメーションが適用されています。

デモのキャプチャ

デモページ: Parallax Scene

複数の画像で構成されたビジュアルに視差効果を与えています。

デモのキャプチャ

デモページ: Callback

コールバックも備えており、デモページではビューポート1ページ分のスクロールで時計がちょうど1周します。

basicScrollの使い方

Step 1: 外部ファイル

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

Step 2: HTML

デモページ: Default」を例に、フェードする要素で基本的な実装方法を紹介します。
スクロールして、要素の上部がビューポートの下部に達するとフェードし始め、さらに中央に移動するにつれ、はっきりと表示されます。

Step 3: JavaScript

適用する要素を指定し、スクリプトを実行します。
要素に適用するCSSの変数(--opacity)も定義します。
fromの.01とtoの.99は不透明度の値で、要素が完全透明から半透明に変化し、半透明から完全に変化するときに通常発生する再描画が回避されます。

Step 4: CSS

JavaScriptで定義したCSSの変数を要素に適用します。
その際、will-changeを使用することで、ブラウザに事前に通知して、アニメーションを適用する要素をマークすることができます。これにより、アニメーション中のパフォーマンスの損失を最小限に抑えることができます。

sponsors

top of page

©2018 coliss