STORK19では、ブロックごとにアニメーション効果(スクロールエフェクト)を追加できるようになっており、標準ブロックとSTORK19専用ブロックの両方で利用可能です。
ブロックにアニメーション効果を追加する
ブロック設定パネルもしくはブロックツールバーのアニメーションオプションから、アニメーションを選択して追加できます。
ver.5.18で追加した「アニメーションの遅延」「アニメーションの速度」を変更できるオプションについては、ブロック設定パネルでのみ操作できます。
アニメーションの表示例
設定できるアニメーション効果は8パターン(ver.5.18時点)です。下記でタブを切り替えてアニメーションを確認できます。
フェードイン
フェードインアップ

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

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

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

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

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

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

ブロックにアニメーション効果をつけられます。フリップイン!
zoomIn, bounceIn, flipInは、ver.5.18で追加しました。
スクロールに応じたアニメーション
アニメーションはページスクロールに応じて発火するようになっています。アニメーション効果を追加したブロックが画面内に表示されてから動作する仕組みです。
アニメーションの遅延を設定する(ver.5.18〜)
ブロック設定パネルの「アニメーション設定」セクションに「アニメーションの遅延」を指定できるオプションがあります。
指定なし / 0.5秒 / 1秒 / 2秒 / 3秒 / カスタム(任意の秒数を入力)の中から選択できます。
アニメーションを設定した要素(ブロック)が、ページスクロールで表示されてからアニメーションが実行されるまでの時間(秒数)を指定できます。
秒数を入力して細かく指定することもできます。(設定可能範囲:0〜5秒)
アニメーションの速度を設定する(ver.5.18〜)
ブロック設定パネルの「アニメーション設定」セクションに「アニメーションの速度」を選択できるオプションがあります。
低速 / やや低速 / 標準 / やや高速 / 高速 の中から選択できます。
スクロールに連動したアニメーションなので、下記デモサイトのようにページを読み進めるのに合わせて動きを出すことができます。
ページに『動き』を取り入れて魅力的に
各ブロックに設定可能なアニメーション。トップページやランディングページでの演出やコンバージョン率を高めたいCTAなど、ユーザー(閲覧者)を引き付ける表現が可能です。

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





























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