この記事にはプロモーションが含まれています
ブロックエディタ対応「Blocks Animation」でスクロールアニメーションもお手軽に!(サンプルあり)
こんな人に読んでほしい!
- SWELLなどのブロックエディタに対応したテーマでブログを書いている
- スクロールアニメーションでページに動きのある演出を加えたい
- でも、スクリプトやCSSはいまいちよくわからない…
「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」で設定できるアニメーションのタイプ
![Blocks Animationのタイプ](https://point-of-view.blog/wp-content/uploads/2021/09/0c653aeaab27bab757422492bd359599.png)
Animationのタイプ
- Loading Animations
フェードイン/アウトや跳ねる系など、ブロック全体に設定できる表示アニメーション - Count Animations ※追加機能
数字をカウントアップしながら表示する、数字テキストのみに設定できるアニメーション - Typing Animations ※追加機能
キーボードで入力してるように、テキストに設定できるタイピングアニメーション
まずは、新たに追加されたテキスト系のアニメーションからご説明します。
「Count Animations」
数字テキストをカウントアップするテキストアニメーションです。ローディング%とかのイメージですかね。
数字を入力したテキスト系のブロックで数字を選択すると、ブロックツールバーの「Count Animation」が選択できます。
![Count Animations](https://point-of-view.blog/wp-content/uploads/2021/09/287d206787cb5dac7ef6ef17cdb98788.png)
ブロック設定から、Delay(遅延)とSpeed(速さ)が設定できます。
「Typing Animations」
テキストをタイピングしながら表示するテキストアニメーションです。
テキスト系のブロックで文字列を選択すると、ブロックツールバーの「Typing Animation」が選択できます。
![Typing Animatons](https://point-of-view.blog/wp-content/uploads/2021/09/0a760f307fec8e2e47ec882be4ae30fc.png)
ブロック設定から、Delay(遅延)とSpeed(速さ)が設定できます。
ちなみに、以下のデモでは縦書きのタイピングアニメーションとして実装しました。
「Loading Animations」
フェードイン/アウトや跳ねる系など、いわゆる「スクロールアニメーション」よ呼ばれる部類の、ブロック全体に設定できる表示アニメーションです。
これについては、以下の章で詳しくご説明します。
「Loading Animations」の使い方
フェードインなどの一般的なアニメーションから、複雑な動きをするアニメーションまで、あらたに追加された動きも含めると、全部で10パターンもあり、それぞれのバリエーションを含めると「96種類」ものアニメーションパターンが準備されています。
![](https://point-of-view.blog/wp-content/uploads/2021/09/4fa62b6f24930cee349e0f7e72c90304.jpg)
- Animation:アニメーションの種類
- Delay:アニメーションを開始するまでの遅延時間
- Speed:アニメーションのスピード
Animationパターン
- Backing … 戻ってくる系 ※新規追加
- Bouncing … 跳ねる・弾む系
- Fading … フェードイン/アウト系
- Flipping … めくる系
- Rotating … 回る系
- Sliding … スライド系
- Zooming … ズームイン/アウト系
- Rolling … 転がる系
- Light Speed … 急発進・急停止系 ※Otherから格上げ
- Other … その他
また、編集画面上でもブロックに設定したアニメーションが確認できます。
(実際はもっとスムーズなアニメーションです)
「Blocks Animation」アニメーションのサンプル
せっかくなので、「Blocks Animation」の全パターンが確認できるサンプルを作成してみました。けっこう長いです^^;
(わかりやすくするため、タイミングを遅らせています)
Backing
Back In Down
![](https://point-of-view.blog/wp-content/uploads/2021/09/1559550952.png)
Back In Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1559550952.png)
Back In Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1559550952.png)
Back In Up
![](https://point-of-view.blog/wp-content/uploads/2021/09/1559550952.png)
Back Out Down
![](https://point-of-view.blog/wp-content/uploads/2021/09/1559550952.png)
Back Out Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1559550952.png)
Back Out Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1559550952.png)
Back Out Up
![](https://point-of-view.blog/wp-content/uploads/2021/09/1559550952.png)
Bouncing
Bounce
![](https://point-of-view.blog/wp-content/uploads/2021/09/1547445467.png)
Bounce in
![](https://point-of-view.blog/wp-content/uploads/2021/09/1547445467.png)
Bounce In Down
![](https://point-of-view.blog/wp-content/uploads/2021/09/1547445467.png)
Bounce In Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1547368476-L.png)
Bounce In Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1547368476.png)
Bounce In Up
![](https://point-of-view.blog/wp-content/uploads/2021/09/1519878010.png)
Bounce Out
![](https://point-of-view.blog/wp-content/uploads/2021/09/1522998843-1.png)
Bounce Out Down
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535710164-2.png)
Bounce Out Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1524208875-R.png)
Bounce Out Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1524208875-L.png)
Bounce Out Up
![](https://point-of-view.blog/wp-content/uploads/2021/09/1522383382.png)
Fading
Fade In
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535710170.png)
Fade In Down
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535710170.png)
Fade In Down Big
![](https://point-of-view.blog/wp-content/uploads/2021/09/1540978996-2.png)
Fade In Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513429058.png)
Fade In Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513429058-1.png)
Fade In Left Big
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513429154.png)
Fade In Right Big
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513429154-1.png)
Fade In Up
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513428528.png)
Fade In Top Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513428528.png)
Fade In Top Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513428528.png)
Fade In Bottom Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513428528.png)
Fade In Bottom Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513428528.png)
Fade Out
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513428599.png)
Fade Out Down
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513428661.png)
Fade Out Down Big
![](https://point-of-view.blog/wp-content/uploads/2021/09/1522998843-1.png)
Fade Out Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1521625091-R.png)
Fade Out Left Big
![](https://point-of-view.blog/wp-content/uploads/2021/09/1521625318-1.png)
Fade Out Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1521625091.png)
Fade Out Right Big
![](https://point-of-view.blog/wp-content/uploads/2021/09/1521625318.png)
Fade Out Up
![](https://point-of-view.blog/wp-content/uploads/2021/09/1524029628.png)
Fade Out Up Big
![](https://point-of-view.blog/wp-content/uploads/2021/09/1522383382.png)
Fade Out Top Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1545295807.png)
Fade Out Top Rgiht
![](https://point-of-view.blog/wp-content/uploads/2021/09/1545295808.png)
Fade Out Bottom Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535361504-2.png)
Fade Out Bottom Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535361501-2.png)
Flipping
Flip
![](https://point-of-view.blog/wp-content/uploads/2021/09/1547368467.png)
Flip In X
![](https://point-of-view.blog/wp-content/uploads/2021/09/1524294914.png)
Flip In Y
![](https://point-of-view.blog/wp-content/uploads/2021/09/1524294918.png)
Flip Out X
![](https://point-of-view.blog/wp-content/uploads/2021/09/1514454424-1.png)
Flip Out Y
![](https://point-of-view.blog/wp-content/uploads/2021/09/1514442509-1.png)
Rotating
Rotate In
![](https://point-of-view.blog/wp-content/uploads/2021/09/1534922069.png)
Rotate In Down Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535361504-2L.png)
Rotate In Down Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535361501-2R.png)
Rotate In Up Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535197124.png)
Rotate In Up Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535197124-1.png)
Rotate Out
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535197124-1.png)
Rotate Out Down Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535361504-2L.png)
Rotate Out Down Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535361501-2R.png)
Rotate Out Up Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1547445467.png)
Rotate Out Up Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1547445467-1.png)
Sliding
Slide In Down
Slide In Left
Slide In Right
Slide In Up
Slide Out Down
Slide Out Left
Slide Out Right
Slide Out Up
Zooming
Zoom In
![](https://point-of-view.blog/wp-content/uploads/2021/09/1547368459.png)
Zoom In Down
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535710170.png)
Zoom In Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535710170.png)
Zoom In Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535710170.png)
Zoom In Up
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535710170.png)
Zoom Out
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535710170.png)
Zoom Out Down
![](https://point-of-view.blog/wp-content/uploads/2021/09/1522998843-1.png)
Zoom Out Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1522998843-1.png)
Zoom Out Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1522998843-1.png)
Zoom Out Up
![](https://point-of-view.blog/wp-content/uploads/2021/09/1522998843-1.png)
Rolling
Roll In
![](https://point-of-view.blog/wp-content/uploads/2021/09/1519019730.png)
Roll Out
![](https://point-of-view.blog/wp-content/uploads/2021/09/1519019730.png)
Light Speed
Light Speed In Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513425346-1.png)
Light Speed In Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513425346-1-1.png)
Light Speed Out Right
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513425346-1-1.png)
Light Speed Out Left
![](https://point-of-view.blog/wp-content/uploads/2021/09/1513425346-1.png)
Other
Flash
![](https://point-of-view.blog/wp-content/uploads/2021/09/1532940145-2.png)
Pulse
![](https://point-of-view.blog/wp-content/uploads/2021/09/1522488431.png)
Rubber Band
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535965055.png)
Shake X
![](https://point-of-view.blog/wp-content/uploads/2021/09/1538453761.png)
Shake Y
![](https://point-of-view.blog/wp-content/uploads/2021/09/1536206749-1.png)
Head Shake
![](https://point-of-view.blog/wp-content/uploads/2021/09/1535197131.png)
Swing
![](https://point-of-view.blog/wp-content/uploads/2021/09/1544411995.png)
TaDa
![](https://point-of-view.blog/wp-content/uploads/2021/09/1544005782-1.png)
Wobble
![](https://point-of-view.blog/wp-content/uploads/2021/09/1533279756.png)
Jello
![](https://point-of-view.blog/wp-content/uploads/2021/09/1539425502.png)
Heart Beat
![](https://point-of-view.blog/wp-content/uploads/2021/09/1517042040.png)
Hinge
![](https://point-of-view.blog/wp-content/uploads/2021/09/1518938152-1.png)
Jack In The Box
![](https://point-of-view.blog/wp-content/uploads/2021/09/1518942138.png)
END
どうでしょうか。CSSアニメーションだと動きもかなりスムーズですよね。
これらの演出をお手軽に実装できる「Blocks Animation」は、トップページだけでなく、投稿ページの目立たせたい箇所にひと演出加えてみたり、アイデア次第で利用シーンもたくさんあると思います。
おまけ:「Blocks Animation」あわせ技サンプル
ちょっと応用して、CSSも加えて「あわせ技」サンプルを作ってみました。
※スマートフォンではご覧いただけません。
![](https://point-of-view.blog/wp-content/uploads/2021/09/4c3185eb74f13efafbaeed7be4d739db.png)
フロント・フリップ インディ
![](https://point-of-view.blog/wp-content/uploads/2021/09/1519019730.png)
泣けるCM
![](https://point-of-view.blog/wp-content/uploads/2021/09/1525341941-1.png)
![](https://point-of-view.blog/wp-content/uploads/2021/09/1525341941-2.png)
![](https://point-of-view.blog/wp-content/uploads/2021/09/1525341941-3.png)
![](https://point-of-view.blog/wp-content/uploads/2021/09/1525346457-1.png)
![](https://point-of-view.blog/wp-content/uploads/2021/09/1525346457-2.png)
![](https://point-of-view.blog/wp-content/uploads/2021/09/1525346457-3.png)
![](https://point-of-view.blog/wp-content/uploads/2021/09/1525429187-1-1-3.png)
結婚式
結婚しました
![](https://point-of-view.blog/wp-content/uploads/2021/09/1533024083-1.png)
ながら運転はやめましょう
![](https://point-of-view.blog/wp-content/uploads/2021/09/1521625318.png)
![](https://point-of-view.blog/wp-content/uploads/2021/09/1536206749.png)
サスケ
![](https://point-of-view.blog/wp-content/uploads/2021/09/1522383382.png)
いかがでしたでょうか。
追加CSSと合わせれば、スクロールアニメーションとしてだけでなく、このようなアニメーションコンテンツまでできちゃうんです。
時間を忘れてずっと遊んでました(笑)
ということで、「Blocks Animation」でみなさんのサイトにもリッチな演出効果を加えてみてはいかがでしょうか。
ではでは。
(スクロール、疲れましたよね…^^; ここまで読んでいただき、ありがとうございました。)
\ ご支援ありがとうございます! /
くれぐれもカスタマイズは「自己責任」でお願いします^^;
当ブログでご紹介しているようなカスタマイズ(←本来の意味での)をしなくても、SWELLの基本機能だけで十分オシャレなブログ・サイトが構築できます。
テーマ選びに迷ったらSWELLを選んでおけば間違いないです!
(カスタマイズ沼にハマらないようご注意ください^^;)
SWELLを使用したブログの構築・カスタマイズのご相談承ります
本業の傍ら、SWELLを使用したブログの構築およびカスタマイズを承っております。
「おしゃれなブログにしたい」
「独自のカスタマイズをしたい」など、
お気軽にご相談ください。
詳しくは、TwitterのDMからどうぞ。
まずはTwitterで仲良くしてください ^^
\ このページで使用している元イラストはコチラ /