アニメーション(Pro版のみ)


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

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

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

アニメーションの効果

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

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

フェードイン

スライドアップ

スライド左

スライド右

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

アニメーションの速度

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

非常に遅い

遅い

標準

速い

非常に速い

アニメーションの距離

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

短い

標準

長い

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

「初回表示のみアニメーション」をオンにすると、ページをスクロールした初回のみ要素が動きます。再度スクロールしたときには動作しません。

アニメーションの解除

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

グループ解除前
グループ解除後

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

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

組み合わせ例

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

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

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

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

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

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

フェードイン 早い

フェードイン 標準

フェードイン 遅い

スライドアップ 速い 短い

スライドアップ 標準 標準

スライドアップ 遅い 長い

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

左右 速い 短い

左右 標準 標準

左右 遅い 長い

左右 非常に遅い 長い

上下 速い 短い

上下 標準 標準

上下 遅い 長い

上下 非常に遅い 長い

ぶるぶる Y方向 短い

ぶるぶる Y方向 標準

ぶるぶる Y方向 長い

ぶるぶる X方向 短い

ぶるぶる X方向 標準

ぶるぶる X方向 長い

どきどき 速い 短い

どきどき 標準 標準

どきどき 遅い 長い

どきどき 非常に遅い 長い

ゆらゆら 非常に速い 標準

ゆらゆら 速い 標準

ゆらゆら 標準 標準

ゆらゆら 遅い 標準

ゆらゆら 非常に遅い 標準

ゆらゆら 非常に遅い 短い

ゆらゆら 非常に遅い 標準

ゆらゆら 非常に遅い 長い

PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。