アニメーション（Pro版のみ）

アニメーションブロックを使うことで、ページをスクロールした時に要素に動きを加えることができます。少し動くだけでユーザの目を引くことができるので、便利なブロックです。

アニメーションブロックの使い方

アニメーションブロックを追加後、中に自由にブロックを追加することが可能です。

アニメーションの効果

アニメーションの効果は【フェードイン / スライドアップ / スライド左 / スライド右 / 左右 / 上下 / ぶるぶる（Y方向）/ ぶるぶる（X方向）/ どきどき / ゆらゆら】 から選べます。

※ページ下部にもサンプルがあります。

アニメーションの速度と距離

アニメーションの速度

「非常に遅い 」「 遅い 」「 標準 」「速い」「非常に速い」から選べます。
※下記の例では、アニメーションの距離はいずれも「長い」に設定しています。

アニメーションの距離

「短い」「標準」「長い」から選べます。
※下記の例では、アニメーションの速度は「非常に遅い」に設定しています。

初回表示のみアニメーション

アニメーションの解除

アニメーション効果が不要となった場合は、ブロックツールバーから「グループ解除」を選択してください。アニメーションブロックだけが削除され、中のブロックはそのまま残せます。

後からアニメーション効果を追加する

設置済みのブロックに対してアニメーション効果を追加したい場合は、設置したブロックのブロックツールバーからアニメーションを選びます。

組み合わせ例

下記のように画像を先に表示させて後からテキストを表示というテクニックも可能です。