アニメーション
Diver Blocksを有効化していると、ほとんどのブロックにDBP OTIONSという項目が追加されます。DBP OPTIONSは、ブロックにさまざまな効果を追加することが可能です。
このページでは、ブロック毎に設定できるアニメーションについて解説します。
アニメーションとは
Gutenbergブロックに設定できるアニメーション効果は、Webページのユーザー体験を向上させるための強力なツールです。
これらの効果を適切に設定することで、ブロックの表示方法をカスタマイズし、ページのわかりやすさやアピール力を高めることができます。
アニメーションの種類
フェード
フェード（フェードイン）は、ブロックが表示領域に入ると、徐々に明るくなり、最後には完全に表示されるアニメーション効果です。
バウンド
バウンド効果は、ブロックが跳ね返るように動くアニメーションを実現することができます。
拡大
拡大効果は、ブロックが大きくなるように動くアニメーションを実現することができます。
フリップ（弾く）
フリップ効果は、ブロックが回転して表示されるように動くアニメーションを実現することができます。
アニメーションの表示オプション
オプションを設定してアニメーションの効果を細かく調整することができます。
スピード - Duration
アニメーションの長さを指定します。単位はミリ秒（ms）で、例えば「500」msと設定するとアニメーションが0.5秒間続きます。値を小さく設定するとアニメーションが速くなり、値を大きく設定するとアニメーションが遅くなります。
遅延間隔 - Delay
アニメーションの開始を遅延させる時間を指定します。単位はミリ秒（ms）で、例えば「1000」msと設定するとアニメーションが1秒後に開始します。 Delay を設定することで、複数のアニメーションを連結することができます。
曲線 - Curve
アニメーションの速度変化を指定します。例えば、「easeIn」 アニメーションはゆっくりと始まり、速くなります。「easeOut」 アニメーションは速く始まり、ゆっくりと終わります。あるいは、「linear」 アニメーションは一定の速度で進行します。Curve を設定することで、アニメーションの感じを変えることができます。
まとめてアニメーションを設定する
ブロック内のそれぞれのアイテムに順にアニメーションを実行させたい時には、親ブロックのみにアニメーションを設定して下さい。そして子要素に適用するをオンにして下さい。
遅延間隔を設定すると、その間隔でアニメーションが順に実行されます。
最後に
ブロックにアニメーションを設定することで、よりリッチなページに仕上げることができます。設定しすぎてごちゃごちゃした印象にならないように気をつけて下さい。
こんなアニメーションがあれば嬉しいなど、要望があればお気軽にご連絡ださい。