LikePay Academyが「スーパーサイトAcademy」に変わりました。詳しくはこちらです。

スクロールのインジケーター

スクロールに応じてスケーリングする水平プログレスインジケーターを作成する

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。引用元はこちらです。

スクロール進行状況のインジケーターは、訪問者がページ内でどこにいるかを追跡するのに役立ちます。

このレッスンで学ぶこと

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

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

スクロールトリガーの設定

InteractionsパネルのPage triggerメニューから、While page is scrollingを選択します

スクロールアニメーションの設定

  1. InteractionsパネルのOn scrollメニューから、Play scroll animationを選択します
  2. Scroll Animationsの隣にあるプラスサインをクリックします
  3. 名前を付けます(例: "scroll progress")
  4. 要素が選択されていることを確認し、0%の隣にあるプラスサインをクリックし、ドロップダウンからScaleを選択します
  5. Scaleの下で、x軸の位置を0に変更します
  6. プログレスバーの100%の位置で、Scaleの下で、x軸の位置を1に変更します

トランスフォームの基点の設定

  1. In the Style panel, scroll down to Effects
  2. Click the More options icon (ellipsis) next to 2D & 3D transforms
  3. Set the Origin to the left
  4. Styleパネルで、Effectsまでスクロールします
  5. 2D & 3D transformsの隣にある More optionsアイコン(省略号)をクリックします
  6. Originを左に設定します

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談