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

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

アニメーション設定は【フェードイン / スライドアップ / スライド左 / スライド右】 から選べます。

フェードイン

スライドアップ

スライド左

スライド右

アニメーションの速度と距離の設定もできます

アニメーションの速度

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

速い

標準

遅い

アニメーションの距離

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

短い

標準

長い

組み合わせで演出の幅が広がります

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

心、揺さぶるクリエイティブ

株式会社ベクトル 代表取締役 石川栄和

心揺さぶるような熱い文章を掲載したい時に、ふわっと順番に出てきたりすると、あたかもちゃんとした事を伝えているような印象を与える事ができるかもしれません。

時として人は雰囲気に騙されたりします。この文章を読まずになんとなくいい感じの印象を持ってしまったあなた。それはこのアニメーションブロックに効果があるという証です。

但し、実際には「無駄なアニメーションなんかストレスがたまるだけなので早く表示して欲しい」というユーザーも多いため、くれぐれも自己満足にならないように注意して使いましょう。

フェードイン 早い

フェードイン 標準

フェードイン 遅い

スライドアップ 速い 短い

スライドアップ 標準 標準

スライドアップ 遅い 長い

スライドアップ 非常に遅い 長い

左右 速い 短い

左右 標準 標準

左右 遅い 長い

左右 非常に遅い 長い

上下 速い 短い

上下 標準 標準

上下 遅い 長い

上下 非常に遅い 長い

Trembring Y 短い

Trembring Y 標準

Trembring Y 長い

Trembring X 短い

Trembring X 標準

Trembring X 長い

どきどき 速い 短い

どきどき 標準 標準

どきどき 遅い 長い

どきどき 非常に遅い 長い

ゆらゆら 非常に速い 標準

ゆらゆら 速い 標準

ゆらゆら 標準 標準

ゆらゆら 遅い 標準

ゆらゆら 非常に遅い 標準

ゆらゆら 非常に遅い 短い

ゆらゆら 非常に遅い 標準

ゆらゆら 非常に遅い 長い