Sign In
Home
購読

アニメーション

ブロックがスクロール位置と時間に応じて多様に移動し、内容を強調する効果を与えます。

アニメーションを追加

編集画面で、アニメーションを適用するブロックのハンドル( ⋮⋮ )> アニメーションをクリックします。アニメーションウィンドウの右上+をクリックして、入場、ホバー、タップ、繰り返し、スクロールのいずれかを選択します。
目的のエフェクトを選択して設定値を調整します。
他の種類のアニメーションを重複して適用するには、アニメーションウィンドウの右上+をもう一度クリックします。
➕
同じアニメーションを複数のブロックに一度に適用したい場合は、スタイルコピー機能を活用してみてください。
スタイルのコピー: Cmd(Ctrl) + Option(Alt) + C
スタイルの貼り付け: Cmd(Ctrl) + Option(Alt) + V

アニメーションの種類

トリガー(アニメーションを開始するための行為)に応じて大きく5つに分けられます。

入場

ブロックが画面に表示されるとすぐにアニメーションが開始され、スクロール位置とは無関係に事前設定された期間だけ動作します。
Slide
Fade in
Scale in
Rotate
Wave(テキストのみ)
アニメーション効果でテキストを強調してみてください。
Type in (テキストのみ)
アニメーション効果でテキストを強調してみてください。
Blur in (テキストのみ)
アニメーション効果でテキストを強調してみてください。
Scramble(テキストのみ)
アニメーション効果でテキストを強調してみてください。
Split text(テキストのみ)
アニメーション効果でテキストを強調してみてください。
Stagger (背景ブロックとセクションのみ)
Welcome to Slashpage

ホバー

マウスカーソルをブロックの上に置いている間、アニメーションは機能し、カーソルが外れると元の状態に戻ります。
スケール
Change color
マウスカーソルをこのボックスの上に置きます。
Text reveal
マウスカーソルをこのテキストの上に置きます。
Text curtain
マウスカーソルをこのテキストの上に置きます。

押す

ブロックをクリック(タッチ)するとアニメーションが機能し、カーソル(手)を離すと元の状態に戻ります。
スケール
この灰色のボックスを押してください。
Change color
この灰色のボックスを押してください。
Text reveal
このテキストを押してみてください。
Text curtain
このテキストを押してください。

繰り返し

サイトにアクセスするとすぐにアニメーションが開始され、スクロール位置に関係なく動作し続けます。
Breathe
Rotate
Heartbeat
Slide(画像スライダのみ)

スクロール

スクロール中にブロックが画面に表示され始めてから見えなくなるまで、アニメーションはスクロール位置に沿って連続的に動作します。
Fade in
Fade out
Parallax
Scale in
Rotate