STORK19/SEでは、ブロックエディタのアニメーション設定で、ページにスクロールエフェクトを実装できるようになっています。
スクロールアニメーションは、ページを見るユーザーの興味を引くための効果的な手法なので、コンテンツを作り込む上で、ぜひ活用したいところです。
そこで、この記事ではSTORK19/SEでのアニメーション設定の使い方、事例をご紹介します。
アニメーション設定の使い方
ブロック設定パネルの「アニメーション設定」から設定できます。アニメーションはスクロール表示により動きますが、動作のタイミングや速度はオプションで調節できるようになっています。
アニメーションの選択
エフェクトは8パターンの中から選択できます。
アニメーションの遅延
アニメーションを設定した要素（ブロック）が画面内に表示されてから、アニメーションを実行するタイミングを秒数（0.1秒単位）で指定できます。
アニメーションの速度
ゆっくり、または素早く動かすなど、アニメーションの動作速度を変更できます。
ブロックツールバーからは、アニメーションの選択のみできます。アニメーションの遅延や速度を調節する場合は、ブロック設定パネルのアニメーション設定から行ってください。
アニメーション効果の使用例
STORK19/SEのアニメーション設定を利用したコンテンツの例をご紹介します。
エフェクトや速度を変えることで、「ふわっと優しく」「躍動的に」など、様々な表現ができます。
カバービジュアル
トップページやランディングページのメインビジュアルにアニメーション効果を付けることで、ファーストビューでユーザーの興味を引く役目を担います。
STORK EDITOR
WordPress
STORK
このようなアニメーションを簡単に実装できます。
CTA（コール・トゥ・アクション）
Call To Actionは、スクロールで素通りされないよう、できるだけ目立たせることが大事です。ここに動きが加われば、ユーザーのアクションを促してくれることでしょう。
Contact
お問い合わせ
サイト制作に関するご質問やご依頼、資料請求、採用のご応募など、お気軽にお問い合わせください。
お電話でのお問い合わせ
Tel.0120-00-0000
メールでのお問い合わせ
アニメーションのタイミングに変化をつける
それぞれの要素のアニメーションが実行されるタイミングをずらす（遅延させる）ことで、コンテンツに躍動感を与えることができます。
ブロガーからの支持が高いロングセラー
STROK19（ストーク19）
多くのユーザーから愛されるブログ向けテーマの決定版。
ブログはもちろんコーポレートサイトとしても。
1カラム型のサイト向けテーマ
STROK SE（ストークSE）
シングルカラムに特化したテーマ。
訴求力が高いページを、より効率的に作成するのに向いています。
まとめ
スクロールアニメーションはユーザーの目を引く効果がある一方、使い過ぎると逆効果になり得るので、ある程度の注意は必要です。
バランスよく散りばめる、または注目してほしいエリアに絞り込んで使うのが効果的です。
STORK19/SEでは、アップデートにより細かなアニメーション設定ができるようになりましたので、いろいろな見せ方を試してみるのも楽しいかと思います。
や