スクロール進行状況のインジケーターは、訪問者がページ内でどこにいるかを追跡するのに役立ちます。
このレッスンで学ぶこと
プログレスバーのデザイン
- Divブロックを作成します
- 名前を付けます
- スタイリングの確認のために背景色を設定します
- 好きな位置に配置します
- 幅を100%に設定します
- 高さを設定します（例: 10ピクセル）
- 位置をビューポートの左上に固定します
- 常に一番上に表示されるように、十分に高いz-index値を設定します
スクロールトリガーの設定
InteractionsパネルのPage triggerメニューから、While page is scrollingを選択します
スクロールアニメーションの設定
- InteractionsパネルのOn scrollメニューから、Play scroll animationを選択します
- Scroll Animationsの隣にあるプラスサインをクリックします
- 名前を付けます（例: "scroll progress"）
- 要素が選択されていることを確認し、0%の隣にあるプラスサインをクリックし、ドロップダウンからScaleを選択します
- Scaleの下で、x軸の位置を0に変更します
- プログレスバーの100%の位置で、Scaleの下で、x軸の位置を1に変更します
トランスフォームの基点の設定
- In the Style panel, scroll down to Effects
- Click the More options icon (ellipsis) next to 2D & 3D transforms
- Set the Origin to the left
- Styleパネルで、Effectsまでスクロールします
- 2D & 3D transformsの隣にある More optionsアイコン（省略号）をクリックします
- Originを左に設定します
