#48|スクロールの進行状況を表示

ページのスクロールに合わせて拡大縮小する、水平方向の進行状況を示すインジケータを作成します。

目次

スクロールプログレスインジケーターを作成するページのスクロールに合わせて拡大縮小する、水平方向の進行状況を示すインジケータを作成します。

スクロールプログレスインジケータは、訪問者がページ上のどこにいるのかを把握するのに役立ちます。

このレッスンでは

  1. プログレスバーをデザインする
  2. スクロールトリガーを設定する
  3. スクロールアニメーションを設定する
  4. トランスフォームの原点をカバーする

について説明しています。

1.プログレスバーのデザイン

  1. Divブロックを作成する
  2. 名前を付ける
  3. 背景色を設定し、スタイリングしているものを確認できるようにする
  4. 好きな場所に配置する
  5. 幅を100%にする
  6. 高さを設定する(例:10ピクセル)
  7. 位置をビューポートの左上に固定する。
  8. Z-indexの値を十分大きくして、常に一番上に表示されるようにします。


2.スクロールトリガーを設定する

インタラクション・パネルのページ・トリガー・メニューから、While page is scrollingを選択します。

これだけです。とてもシンプルですね。

3. スクロールアニメーションを設定する

InteractionsパネルのOn scrollメニューから、Play scroll animationを選択します。

  1. スクロールアニメーションの横のプラス記号をクリックする
  2. 名前を付ける (例: "scroll progress")
  3. 要素が選択されていることを確認し、0%でプラス記号をクリックし、ドロップダウンから「スケール」を選択します。
  4. [スケール]で、X軸の位置を0に変更します。
  5. 100%でプログレスバーをクリックし、[スケール]でX軸の位置を1に変更します。

5.カバートランスポートの原点

  1. スタイルパネルで、「効果」までスクロールダウンします。
  2. 2D & 3D トランスフォームの隣にある「その他のオプション」アイコン(省略記号)をクリックします。
  3. 原点を左側に設定します。