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

クリックで表示・非表示

クリックまたはタップトリガーを作成して、クリックで別の要素を表示および非表示にします。

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

このレッスンで学ぶこと

要素が表示されるアニメーションの作成

  1. トリガーとして機能させたい要素を選択します(例:「表示」ボタン)
  2. インタラクションパネルで、On Selected ElementメニューからMouse Click(Tap)を選択します
  3. On 1st ClickからStart an Animationを選択します
  4. Timed Actionsの横にあるプラスのアイコンをクリックします
  5. アニメーションの名前を「表示」とします
  6. 表示されることを望む要素を選択します(これはトリガーとは異なる要素である必要があります)
  7. Timed Actionsの横にあるプラスのアイコンをクリックし、Hide/Showを選択します
  8. Displayをnoneに設定するために目のアイコンをクリックします
  9. Set as initial stateの横にあるボックスをクリックします
  10. まだインタラクションパネル内で、Timed Actionsの下に2番目のHide/Showアクションを追加するためにプラスのアイコンをクリックします
  11. Hide/Showの下で、元の値が何であったかを設定します(例:Blockの場合)

要素を非表示にするアニメーションの作成

  1. 前のステップと同じトリガー要素を選択します
  2. On 2nd ClickからStart an Animationを選択します
  3. Timed Actionsの横にあるプラスのアイコンをクリックします
  4. アニメーションの名前を「Hide」とします
  5. 前のステップと同じ要素を選択します(非表示にしたい要素)
  6. Timed Actionsの横にあるプラスのアイコンをクリックし、Hide/Showを選択します
  7. Displayをnoneに設定するために目のアイコンをクリックします

2つ目のトリガー要素を追加し、両方をクリックで表示/非表示できるように設定する

  1. オリジナルのトリガー要素(“how Lyrics” text))をクリックして複製します。
  2. 複製した要素の名前を変更します(例:Hide Lyrics)。
  3. アクションを作成し、initial stateの表示を非表示(none)に設定します。
  4. 2つ目のアクションを追加し、表示設定を元の値に設定します(例:ブロック)。
  5. 「Show Lyrics」をクリックし、クリックで非表示にするために表示設定をnoneに設定します。
  6. 「Hide Lyrics」をクリックし、表示設定をnoneにするアニメーションを追加します。
  7. 「Show Lyrics」に戻り、2回目のクリックで再び表示されるようにするためのアニメーションを追加します。
  8. タイムドアクション内のすべての要素が同時に実行されるように、0秒に設定してドラッグして調整します。

目次

あなたもNoCodeのプロに

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

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

  • チャットサポート

  • 個別ビデオ通話相談