この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元スクロール進行状況のインジケーターは、訪問者がページ内でどこにいるかを追跡するのに役立ちます。
このレッスンで学ぶこと
プログレスバーのデザイン
- 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を左に設定します
目次
トップへ