【WordPressプラグイン】文字などをふわっと表示させるお勧めのプラグインBlocks Animation

よくホームページで、スクロールに合わせて文字などがフワッと現れるのを見たことがあると思いますが、WordPressサイトなら無料のプラグインをインストールすることによって、難しいJavaScriptなどを記述しなくてもこのようなアニメーションを表現することができます。

今回は、ブロックエディタでブロック単位でアニメーションを設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」を紹介させていただきます。

「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

このようなフェードイン以外にも、バウンス、フェードアウト、フリップ、ローテート、スライド、ズーム、ローリングなど、その他いろいろなアニメーションを設定できます。

もちろん、テキストだけでなく画像などにもアニメーションを付けることができます。

このようにいろいろなアニメーションがありますので、工夫しだいによっては、動きのある面白いホームページが作れるかもしれません。

以上、簡単にブロック単位でアニメーションを設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」の紹介でした。