[JS]デスクトップとスマホの両方に対応！さまざまなパララックススクロールを実装できるスクリプト -basicScroll
Post on:2018年2月21日
sponsors
Webページやスマホアプリで、ユーザーがスクロールした位置に応じてCSSアニメーションを簡単に適用できるパララックススクロールを実装する軽量スクリプトを紹介します。
単体で動作するので、非常に便利だと思います。
basicScroll
basicScroll -GitHub
basicScrollの特徴
basicScrollではスクロール位置に応じてCSSを変更でき、CSSの変数を利用してアニメーションを適用します。スクロールで同時に表示された要素に対しても別々のアニメーションを簡単に設定でき、JavaScriptを使用してアニメーションをさらに制御できます。
basicScrollの特徴
- 他のスクリプトへの依存はゼロ
- CommonJSとAMDのサポート
- シンプルなJavaScript API
- ブラウザのパフォーマンスに最適化された実装
- デスクトップとスマホの両方をサポート
basicScrollのデモ
デモではbasicScrollの基本的な動作を確認できます。
スクロールに応じて、div要素の矩形にさまざまなアニメーションが適用されています。
複数の画像で構成されたビジュアルに視差効果を与えています。
コールバックも備えており、デモページではビューポート1ページ分のスクロールで時計がちょうど1周します。
basicScrollの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src="basicScroll.min.js"></script> </body> |
Step 2: HTML
「デモページ: Default」を例に、フェードする要素で基本的な実装方法を紹介します。
スクロールして、要素の上部がビューポートの下部に達するとフェードし始め、さらに中央に移動するにつれ、はっきりと表示されます。
|
1 |
<div class="box element"></div> |
Step 3: JavaScript
適用する要素を指定し、スクリプトを実行します。
要素に適用するCSSの変数（--opacity）も定義します。
fromの.01とtoの.99は不透明度の値で、要素が完全透明から半透明に変化し、半透明から完全に変化するときに通常発生する再描画が回避されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const instance = basicScroll.create({ elem: document.querySelector('.element'), from: 'top-bottom', to: 'middle-middle', props: { '--opacity': { from: .01, to: .99 } } }) instance.start() |
Step 4: CSS
JavaScriptで定義したCSSの変数を要素に適用します。
その際、will-changeを使用することで、ブラウザに事前に通知して、アニメーションを適用する要素をマークすることができます。これにより、アニメーション中のパフォーマンスの損失を最小限に抑えることができます。
|
1 2 3 4 |
.element { opacity: var(--opacity); will-change: opacity; } |
sponsors
