ブロックエディタ対応「Blocks Animation」でスクロールアニメーションもお手軽に！（サンプルあり）

　

2022年3月のメジャーバージョンアップ（→2.0）により、「Count Animations」と「Typing Animations」が追加されたようです。
詳しくは後述します。

「Blocks Animation」プラグインで簡単にスクロールアニメーションを設置

スクロールをトリガー（発火）にして、フェードインなどのアニメーションを簡単に設置できる「Blocks Animation」プラグインのご紹介です。

「Blocks Animation: CSS Animations for Gutenberg Blocks」とは、JavaScriptやjQueryなどのスクリプトを一切使わず、スクロールに連動したCSSアニメーションを演出できるプラグインです。

プラグインをインストールして有効化するだけで、とくに難しい設定もありません。

また、ブロックエディタに完全対応しているので、ブロックエディタに完全対応のテーマ「SWELL」との相性もいいです。

「Blocks Animation」のアニメーションのタイプと設定方法

使い方もとてもかんたん。

「Blocks Animation」プラグインをインストールして有効化すると、設定サイドバーの「ブロック」タブ内に「Animation」項目が追加されます。

アニメーションさせたいブロックを選択して、設定サイドバーからアニメーションの種類を選択するだけ。面倒なCSSの追加も不要です。

2022年3月のメジャーアップデートにより、アニメーションの「タイプ」が増えました。

「Blocks Animation」で設定できるアニメーションのタイプ

まずは、新たに追加されたテキスト系のアニメーションからご説明します。

「Count Animations」

数字テキストをカウントアップするテキストアニメーションです。ローディング％とかのイメージですかね。

数字を入力したテキスト系のブロックで数字を選択すると、ブロックツールバーの「Count Animation」が選択できます。

ブロック設定から、Delay（遅延）とSpeed（速さ）が設定できます。

「Typing Animations」

テキストをタイピングしながら表示するテキストアニメーションです。

テキスト系のブロックで文字列を選択すると、ブロックツールバーの「Typing Animation」が選択できます。

ブロック設定から、Delay（遅延）とSpeed（速さ）が設定できます。

ちなみに、以下のデモでは縦書きのタイピングアニメーションとして実装しました。

「Loading Animations」

フェードイン／アウトや跳ねる系など、いわゆる「スクロールアニメーション」よ呼ばれる部類の、ブロック全体に設定できる表示アニメーションです。

これについては、以下の章で詳しくご説明します。

「Loading Animations」の使い方

フェードインなどの一般的なアニメーションから、複雑な動きをするアニメーションまで、あらたに追加された動きも含めると、全部で10パターンもあり、それぞれのバリエーションを含めると「96種類」ものアニメーションパターンが準備されています。

また、編集画面上でもブロックに設定したアニメーションが確認できます。

（実際はもっとスムーズなアニメーションです）

「Blocks Animation」アニメーションのサンプル

せっかくなので、「Blocks Animation」の全パターンが確認できるサンプルを作成してみました。けっこう長いです^^;
（わかりやすくするため、タイミングを遅らせています）

Backing

Bouncing

Fading

Flipping

Rotating

Sliding

Zooming

Rolling

Light Speed

Other

どうでしょうか。CSSアニメーションだと動きもかなりスムーズですよね。

これらの演出をお手軽に実装できる「Blocks Animation」は、トップページだけでなく、投稿ページの目立たせたい箇所にひと演出加えてみたり、アイデア次第で利用シーンもたくさんあると思います。

おまけ：「Blocks Animation」あわせ技サンプル

ちょっと応用して、CSSも加えて「あわせ技」サンプルを作ってみました。

※スマートフォンではご覧いただけません。

フロント・フリップ　インディ

泣けるCM

結婚式

ながら運転はやめましょう

サスケ

いかがでしたでょうか。

追加CSSと合わせれば、スクロールアニメーションとしてだけでなく、このようなアニメーションコンテンツまでできちゃうんです。

時間を忘れてずっと遊んでました（笑）

ということで、「Blocks Animation」でみなさんのサイトにもリッチな演出効果を加えてみてはいかがでしょうか。

　

ではでは。

（スクロール、疲れましたよね…^^;　ここまで読んでいただき、ありがとうございました。）

＼　このページで使用している元イラストはコチラ　／

Linustock(ライナストック)

祈る人 の無料イラスト素材 - Linustock(ライナストック) 「祈る人 」の無料（フリー）線画イラスト素材はLinustock(ライナストック) にお任せください。会員登録不要で加工、一部商用利用OK！オシャレでシンプルで加工も簡単。き...