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

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

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

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

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

「Blocks Animation」のアニメーションの種類と設定方法

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

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

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

アニメーションの種類は全部で8パターンもあり、それぞれのバリエーションを含めると「78種類」ものアニメーションパターンが準備されています。

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

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

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

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

Bouncing

Fading

Flipping

Rotating

Sliding

Zooming

Rolling

Other

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

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

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

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

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

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

泣けるCM

結婚式

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

サスケ

いかがでしたでょうか。

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

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

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

　

ではでは。

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

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

Linustock(ライナストック)

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