Home

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

アニメーションを追加

編集画面の右側で、アニメーションメニューをクリックします。

目的のブロックにカーソルを合わせて[ アニメーションの追加]をクリックし、目的のアニメーションを選択します。

アニメーションの適用が完了したブロックは、画像のように背景色が緑色に見えます。画面右プレビューモードオプションをオフにしてキーを押すと、ビューモードに切り替えずにアニメーションが適用されている様子を事前に確認できます。

同じアニメーションを複数のブロックに一度に適用したい場合は、スタイルコピー機能を活用してみてください。

スタイルのコピー: Cmd(Ctrl) + Option(Alt) + C

スタイルの貼り付け: Cmd(Ctrl) + Option(Alt) + V

アニメーションの種類

トリガー（アニメーションを開始するための行為）に応じて大きく3つに分けられ、トリガーごとにそれぞれ異なるアニメーションを適用できます。それぞれの名前の下の例を使って、どのような効果があるのかを確認します。

ブロックが画面に表示されるとすぐにアニメーションが開始され、スクロール位置とは無関係に事前設定された期間だけ動作します。

ボタン設定：Delay 0 | Duration 1 | CubicBezier
画像設定値：Delay 0.3 | Duration 1 | CubicBezier

ボタン設定：Delay 0 | Duration 0.8 | Animation CubicBezier
画像設定値：Delay 0 | Duration 0.8 | Animation CubicBezier

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

ボタン設定：ディスタンス150 | Direction Left | Overflow Visible
画像設定値：Distance 150 | Direction Right | Overflow Visible

ボタン設定値：なし
画像設定値：なし

ボタン設定値：なし
画像設定値：なし

ボタン設定：Direction Center
画像設定値：Direction Bottom

サイトにアクセスするとすぐにアニメーションが開始され、スクロール位置に関係なく動作し続けます。

ボタン設定：ディスタンス10 | Duration 2 |
画像設定値：Distance 50 | Direction Width |

複数の画像が水平方向に流れます。イメージスライダーブロックにのみ適用できます。

設定値：Speed 2 | Pause on hover On