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

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

よくホームページで、スクロールに合わせて文字などがフワッと現れるのを見たことがあると思いますが、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」の紹介でした。

関連記事 Related Articles