Share
Sign In
アニメーション
ブロックがスクロール位置と時間に応じて多様に移動し、内容を強調する効果を与えます。
アニメーションを追加
編集画面の右側で、アニメーションメニューをクリックします。
目的のブロックにカーソルを合わせて[ アニメーションの追加]をクリックし、目的のアニメーションを選択します。
アニメーションの適用が完了したブロックは、画像のように背景色が緑色に見えます。画面右プレビューモードオプションをオフにしてキーを押すと、ビューモードに切り替えずにアニメーションが適用されている様子を事前に確認できます。
アニメーションの種類
トリガー（アニメーションを開始するための行為）に応じて大きく3つに分けられ、トリガーごとにそれぞれ異なるアニメーションを適用できます。それぞれの名前の下の例を使って、どのような効果があるのかを確認します。
入場(Entrance)
ブロックが画面に表示されるとすぐにアニメーションが開始され、スクロール位置とは無関係に事前設定された期間だけ動作します。
スライド(Slide)
ボタン設定：Delay 0.3 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier
画像設定値：Delay 0.6 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier
画像設定値：Delay 0.6 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier
フェードイン
ボタン設定：Delay 0 | Duration 1 | CubicBezier
画像設定値：Delay 0.3 | Duration 1 | CubicBezier
画像設定値：Delay 0.3 | Duration 1 | CubicBezier
スケールイン
ボタン設定：Delay 0 | Duration 0.8 | Animation CubicBezier
画像設定値：Delay 0 | Duration 0.8 | Animation CubicBezier
画像設定値：Delay 0 | Duration 0.8 | Animation CubicBezier
スクロール
スクロール中にブロックが画面に表示され始めてから見えなくなるまで、アニメーションはスクロール位置に沿って連続的に動作します。
パラロックス(Parallax)
ボタン設定：ディスタンス150 | Direction Left | Overflow Visible
画像設定値：Distance 150 | Direction Right | Overflow Visible
画像設定値：Distance 150 | Direction Right | Overflow Visible
フェードイン
ボタン設定値：なし
画像設定値：なし
画像設定値：なし
フェードアウト(Fade out)
ボタン設定値：なし
画像設定値：なし
画像設定値：なし
スケールイン
ボタン設定：Direction Center
画像設定値：Direction Bottom
画像設定値：Direction Bottom
無限繰り返し(Infinite)
サイトにアクセスするとすぐにアニメーションが開始され、スクロール位置に関係なく動作し続けます。
ブレス(Breathe)
ボタン設定：ディスタンス10 | Duration 2 |
画像設定値：Distance 50 | Direction Width |
画像設定値：Distance 50 | Direction Width |
スライド(Slide)
複数の画像が水平方向に流れます。イメージスライダーブロックにのみ適用できます。
設定値：Speed 2 | Pause on hover On
