今回は「Blocks Animation: CSS Animations for Gutenberg Blocks」を使って、トップページのヒーロー画像にアニメーションを付ける方法を紹介します。
このプラグインはSWELLとも相性が良く、初心者の方でも簡単にアニメーションを付けることができます。
Blocks Animationプラグインの使い方
記事の設定メニュー（表示されてない時は”設定”のアイコンをクリック）にあります。
下の方にスクロールすると「アニメーション」とあるので、ここを展開します。
フィルタで絞り込むor「上へフェードイン」を探して選択します。
反映した結果はこの通り！数回のクリックだけでこのアニメーションはすごいですね。
Blocks Animationが動かない時は
アニメーションを設定したけど、動かない時があります。
SWELLだとアニメーションを制御する機能があり、それをONにしてると動きません。
SWELL設定＞機能停止＞「ページ表示時のアニメーション」を停止する にチェックが入っていないことを確認してください。
H2/H3/H4のタイトルだけを全ページ自動的にアニメーション付ける方法はこちらの記事をご覧ください。
あわせて読みたい
タイトルをふわっと表示させるアニメーション
H1/H2/H3/H4のタイトルに動きをつけてふわっと表示させたいなぁと思いました。HPにも流行りがあるのと、動きを付けることで”洗練されたサイト”としてアピールできるから...
コメント