よくホームページで、スクロールに合わせて文字などがフワッと現れるのを見たことがあると思いますが、WordPressサイトなら無料のプラグインをインストールすることによって、難しいJavaScriptなどを記述しなくてもこのようなアニメーションを表現することができます。
今回は、ブロックエディタでブロック単位でアニメーションを設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」を紹介させていただきます。
こんな感じで文字などがフェードインしたり
横からスッと現れたりするやつです。
Contents
「Blocks Animation: CSS Animations for Gutenberg Blocks」のインストール
WordPressの管理画面の「プラグイン」＞「新規追加」をクリックして、プラグインの検索窓に「Blocks Animation」と入力してください。
「Blocks Animation: CSS Animations for Gutenberg Blocks」プラグインが見つかったら、「今すぐインストール」をクリック、さらに「有効化」してください。
「Blocks Animation: CSS Animations for Gutenberg Blocks」の使い方
「Block Animation」が有効化されていると、投稿ページや固定ページの記事編集画面での右側に「Animations」という項目が追加されています。
あらかじめ、ブロックエディタでテキストや見出し、画像などのブロックを作成しておき、アニメーション効果を付けたいブロックを選択し、編集画面右側の「Animations」をクリックしてください。Animationの種類、Delay（発動までの時間）、Speed（動きの速さ）を設定できます。
例えば、以下のようなフェードインするアニメーションを簡単に設定することができます。
Fade In
Fade In Left
Fade In Right
Fade In Up
使えるアニメーションは70種類以上あります
このようなフェードイン以外にも、バウンス、フェードアウト、フリップ、ローテート、スライド、ズーム、ローリングなど、その他いろいろなアニメーションを設定できます。
もちろん、テキストだけでなく画像などにもアニメーションを付けることができます。
まとめ
このようにいろいろなアニメーションがありますので、工夫しだいによっては、動きのある面白いホームページが作れるかもしれません。
このような、文字などをアニメーションで動きを付けるプラグインは、「Shortcodes Ultimate」など他にもありますが、使ってみた感想として、この「Blocks Animation: CSS Animations for Gutenberg Blocks」が一番自然な感じで良かったのでおすすめです。
以上、簡単にブロック単位でアニメーションを設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」の紹介でした。
