スクロール・ホバー・クリックでエレメントに動きを付ける.
セクション、ロー、コンテンツエレメントは動かせます。スクロールで表示される見出しをフェードアップさせ、少し遅れてボタンを続けたり、ホバーでアイコンをパルスさせたりできます。いずれも設定にAnimationパネルがあります。例では見出しをフェードインし、少し遅れて登録ボタンをフェードインします。
動画ではセクションの表示に合わせてボタンと見出しをフェードインしています。
見出しとボタンをフェードインする
- 空のコンテンツエリアでAdd Elementsをクリックし、LayoutタブからSectionを選びます。
- セクションにホバーしてMore > Settingsを開きます。
- 対象はHTML classesで、Align text centerを選んでSaveをクリックします。
- セクションの+をクリックし、ContentタブからButtonを選びます。設定が開きます。
- 入力するのは
Register nowをTitleに、/registerをLinkに入力することです。 - 開くのはAnimationパネルで、Animation startをOn appearに設定します。
- 設定するのはAnimation inで、fadeInUpにします。
- 対象はHiddenで、Before in-animationにチェックします。
- 設定するのはIn-delayで、600にしてSaveをクリックします。
- セクションの+を再度クリックし、ContentタブからTextを選びます。ボタンの上に配置されます。
- 見出しを入力し(例:
Open day 2026)、エディターツールバーでHeading 2に設定します。 - 開くのはAnimationパネルです。ボタンと同様にOn appear、fadeInUp、Before in-animationを選びます。
- 設定するのはDurationで、800にしてSaveをクリックします。
- ツールバーのSaveをクリックします。
- ビューメニュー(ツールバーの目のアイコン)を開き、Previewを選びます。
試せるその他のエフェクト
- Scroll reveal: On appear、fadeInUp、Before in-animationとDurationの800。
- Staggered cards: 3つのカードに同じエフェクト。In-delayは0、200、400。
- Attention pulse: On appear、pulse、Infiniteはオン、Durationは1500。
- Hover pulse: On hover、pulse、Parent numberは0。反応するのはエレメント自体のみです。
- Tab reveal: On triggerとタブ内エレメントのfadeIn。タブを開くたびに再生されます。
表示内容
テキストを保存するとエディターは両方のエフェクトを再生します。見出しは800ミリ秒かけてフェードアップし、ボタンは600ミリ秒遅れて続きます。訪問者にはセクションのスクロール表示時に同じ内容が見えます(ページ読み込みごとに1回)。Before in-animationにチェックがあるため、両方はエフェクト開始まで非表示のままです。
設定
| 設定 | 動作 | デフォルト |
|---|---|---|
| Animation start | エフェクトの再生タイミング。On appear(スクロールで表示)、On hover、On click、On trigger(エレメントを含むカルーセルスライド、タブ、トグルが開いたとき) | No animation |
| Animation in | 入場エフェクト。フェード、スライド、ズーム、フリップ、バウンス・パルス・シェイクなどの注目エフェクト | No animation |
| Animation out | 終了エフェクト。同じ一覧から選びます。On hoverとOn triggerでのみ表示されます | No animation |
| Hidden | Before in-animationはエフェクト再生までエレメントを非表示にします。After in-animationはエフェクト終了後に非表示にします | なし |
| Infinite | 際限なくエフェクトを繰り返します | オフ |
| Appear boundary | 対象はOn appearの場合で、エフェクト開始位置の画面下からの距離で、画面高のパーセント値です。0はエレメントのスクロール表示時に開始し、100は画面1つ分手前で開始します | 100 |
| Duration | エフェクトの長さ。0〜3000ミリ秒 | 1000 |
| In-delay | 入場再生前の待機時間。最大10000ミリ秒 | 0 |
| Out-delay | 終了再生前の待機時間。最大10000ミリ秒 | 0 |
| Parent number | 対象はOn hoverとOn clickで、訪問者が指す・クリックするエレメントを指定します。0はエレメント自体、1は親、2は親の親です | 1 |
カラムにはAnimationパネルがありません。レイアウトエレメント内の単独のタブ、トグル、スライドも同様です。代わりに内部のエレメントにアニメーションを付けます。
アニメーションが表示されない場合
- エレメントが表示されません。 Before in-animationはエフェクト再生まで非表示にしますが、Animation inがNo animationです。Animation inでエフェクトを選びます。
- エフェクトは1回再生して停止しました。 On appearはページ読み込みごとに1回再生します。再度見るにはページを再読み込みするか、繰り返すエフェクトにはInfiniteをオンにします。
- 訪問者がエレメントに到達する前にエフェクトが始まります。 Appear boundaryが高くなっています。100ではエレメントのスクロール表示より画面1つ分手前でエフェクトが始まります。Animationパネルで0に設定します。
- エレメント付近へのホバーでエフェクトが始まります。 Parent numberが1のため、親がポインターを監視しています。Parent numberを0に設定します。
次のステップ
- ホバーエフェクト：ポインターがエレメント上にある間の色・影・不透明度を変更する。
- 背景：アニメーション付きセクションに色・写真・グラデーションを付ける。
- カルーセルレイアウト：スライドが開くたびにOn triggerエフェクトを再生する。