STORK19を今すぐダウンロード!

ブロックのアニメーション設定

STORK19では、ブロックごとにアニメーション効果(スクロールエフェクト)を追加できるようになっており、標準ブロックとSTORK19専用ブロックの両方で利用可能です。

ブロックにアニメーション効果を追加する

ブロック設定パネルもしくはブロックツールバーのアニメーションオプションから、アニメーションを選択して追加できます。

ver.5.18で追加した「アニメーションの遅延」「アニメーションの速度」を変更できるオプションについては、ブロック設定パネルでのみ操作できます。

アニメーションの表示例

設定できるアニメーション効果は8パターン(ver.5.18時点)です。下記でタブを切り替えてアニメーションを確認できます。

フェードイン

OPENCAGE

ブロックにアニメーション効果をつけられます。フェードイン。

フェードインアップ

OPENCAGE

ブロックにアニメーション効果をつけられます。下からフェードイン。

フェードインダウン

OPENCAGE

ブロックにアニメーション効果をつけられます。上からフェードイン。

フェードインライト

OPENCAGE

ブロックにアニメーション効果をつけられます。右からフェードイン。

フェードインレフト

OPENCAGE

ブロックにアニメーション効果をつけられます。左からフェードイン。

ズームイン

OPENCAGE

ブロックにアニメーション効果をつけられます。ズームイン!

バウンスイン

OPENCAGE

ブロックにアニメーション効果をつけられます。バウンスイン!

フリップイン

OPENCAGE

ブロックにアニメーション効果をつけられます。フリップイン!

zoomIn, bounceIn, flipInは、ver.5.18で追加しました。

スクロールに応じたアニメーション

アニメーションはページスクロールに応じて発火するようになっています。アニメーション効果を追加したブロックが画面内に表示されてから動作する仕組みです。

アニメーションの遅延を設定する(ver.5.18〜)

ブロック設定パネルの「アニメーション設定」セクションに「アニメーションの遅延」を指定できるオプションがあります。

指定なし / 0.5秒 / 1秒 / 2秒 / 3秒 / カスタム(任意の秒数を入力)の中から選択できます。

アニメーションを設定した要素(ブロック)が、ページスクロールで表示されてからアニメーションが実行されるまでの時間(秒数)を指定できます。

秒数を入力して細かく指定することもできます。(設定可能範囲:0〜5秒)

アニメーションの速度を設定する(ver.5.18〜)

ブロック設定パネルの「アニメーション設定」セクションに「アニメーションの速度」を選択できるオプションがあります。

低速 / やや低速 / 標準 / やや高速 / 高速 の中から選択できます。

スクロールに連動したアニメーションなので、下記デモサイトのようにページを読み進めるのに合わせて動きを出すことができます。

CORPORATE01 | STORK19の企業向けデモサイト

ページに『動き』を取り入れて魅力的に

各ブロックに設定可能なアニメーション。トップページやランディングページでの演出やコンバージョン率を高めたいCTAなど、ユーザー(閲覧者)を引き付ける表現が可能です。

  • 見てもらいたいセクションにアニメーションを使って目立たせる
  • 固定ページでアニメーションを使って魅力的なランディングページをつくる
  • CTAに利用する
  • 押してもらいたいボタンに設定する
OPENCAGE

うまく利用して、ユーザーの目を惹くコンテンツを目指そう!

記事下ウィジェットの表示例(PC)

※2カラムショートコードを使って広告を横並びにすることも可能です。