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

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

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

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

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

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

アニメーションの設定項目

・Animation：アニメーションの種類

・Delay：アニメーションを開始するまでの遅延時間

・Speed：アニメーションのスピード

Animationパターン

・Bouncing　…　跳ねる・弾む系

・Fading　…　フェードイン／アウト系

・Flipping　…　めくる系

・Rotating　…　回る系

・Sliding　…　スライド系

・Zooming　…　ズームイン／アウト系

・Rolling　…　転がる系

・Other　…　その他

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