スクロールプログレスインジケーターを作成するページのスクロールに合わせて拡大縮小する、水平方向の進行状況を示すインジケータを作成します。
スクロールプログレスインジケータは、訪問者がページ上のどこにいるのかを把握するのに役立ちます。
このレッスンでは
- プログレスバーをデザインする
- スクロールトリガーを設定する
- スクロールアニメーションを設定する
- トランスフォームの原点をカバーする
について説明しています。
1.プログレスバーのデザイン
- Divブロックを作成する
- 名前を付ける
- 背景色を設定し、スタイリングしているものを確認できるようにする
- 好きな場所に配置する
- 幅を100%にする
- 高さを設定する（例：10ピクセル）
- 位置をビューポートの左上に固定する。
- Z-indexの値を十分大きくして、常に一番上に表示されるようにします。
2.スクロールトリガーを設定する
インタラクション・パネルのページ・トリガー・メニューから、While page is scrollingを選択します。
これだけです。とてもシンプルですね。
3. スクロールアニメーションを設定する
InteractionsパネルのOn scrollメニューから、Play scroll animationを選択します。
- スクロールアニメーションの横のプラス記号をクリックする
- 名前を付ける (例: "scroll progress")
- 要素が選択されていることを確認し、0%でプラス記号をクリックし、ドロップダウンから「スケール」を選択します。
- [スケール]で、X軸の位置を0に変更します。
- 100%でプログレスバーをクリックし、[スケール]でX軸の位置を1に変更します。
5.カバートランスポートの原点
- スタイルパネルで、「効果」までスクロールダウンします。
- 2D & 3D トランスフォームの隣にある「その他のオプション」アイコン（省略記号）をクリックします。
- 原点を左側に設定します。