【全57種紹介】ブロックにアニメーションを簡単に追加!Blocks Animationの使い方

Blocks-Animation
  • ※本記事はアフィリエイトリンクを含みます
ヨメ

ブロックにアニメーションを付けたいなー…
難しくなくて簡単な方法で!

プラグインを使えば簡単にアニメーションを付けられるよ!

コンテンツを目立たせる方法は、色を変えたり文字を大きくしたりマーカーを引いてみたりと工夫が出来ますが、一番目立つ方法は「動きを加える」ことですね。

今回紹介するBlocks Animation: CSS Animations for Gutenberg Blocksなら追加CSSやJavaScriptを使うことなくブロックメニューからアニメーションを付けることが出来ます。

特殊なアニメーションブロックを追加するのではなくて、どのブロックにもアニメーションを付けることが出来るのでめちゃくちゃ重宝します!

今回は、使えるアニメーションの種類や設定方法などを詳しくまとめていきます!

種類も豊富なのでかなりおすすめのプラグインです!

この記事で分かること
  • Blocks Animationの使いやすい特徴や使い方
  • 追加できるアニメーション全57種類の動き
  • アニメーションの設定方法
Blocks Animation: CSS Animations for Gutenberg Blocks
総合評価
( 4.5 )
メリット
  • 既存のブロックにアニメーションを付けることが出来る
  • アニメーションの種類が豊富
デメリット
  • 説明が英語
  • DELAYとSPEEDの2種類のみで細かい設定に向いてない
目次

Blocks Animationの使いやすい特徴や使い方

Blocks Animation は、Gutenberg のすべてのブロックに最も洗練された方法で CSS アニメーションを追加することができます。

Blocks Animation の UI は、インストールしたことに気づかないほどネイティブで直感的です。インストールするだけで、すべてのブロックのアニメーション設定が、ブロック設定サイドバーに表示されるようになります。

https://ja.wordpress.org/plugins/blocks-animation/より引用

プラグインページはこちら

特徴・使い方・メリット・デメリット

Blocks Animationはインストールしただけで使えるプラグインで、プラグイン自体に設定は必要ありません。

使いたいブロックのブロックメニューに「Animations」が追加され、そこから各アニメーションを追加することが出来ます。

追加するアニメーションには、それぞれ「種類」「作動するまでの時間」「作動時間」を設定出来ます。

メリットとデメリット
  • 既存のブロックにアニメーションを追加出来る
  • 分かりやすく設定が簡単
  • ブロックが表示される時にアニメーションがスタートされる
  • アニメーションの種類が豊富
  • 説明が英語
  • アニメーションのリストが毎回1番上から選択
  • 細かい設定は出来ない

デメリットとしては、全て英語なので分かりにくい箇所もありますが、当記事を見てもらえればどんなアニメーションがあり、どの設定をすればいいのか分かるかと思います!

その他にも、アニメーションの重ね掛けが出来なかったり、タイミング等の細かい設定が出来ませんが十分すぎる性能があります。

次にデメリットに対してメリットを挙げると、アニメーションブロックを追加するのではなく既存のブロックにアニメーションを付けることが出来るので簡単に設定出来ます!

またアニメーションの種類が何を使うか迷ってしまうほど豊富で、種類としてはなんと57種類のパターンがあります!

追加できるアニメーションの種類

ヨメ

どんなアニメーションが追加できるの?

ここからは実際にアニメーションを追加したブロックを交えて紹介するよ!

追加できるアニメーションは3種類あります。

  • ブロック自体に追加する登場アニメーション~Loading Animations~
  • 数字に対してカウントアップを追加~Count Animations~
  • 文字に対してタイピング風のアニメーションを追加~Typing Animations~

ブロックの登場アニメーション~Loading Animations~

ブロックの登場アニメーションが最も種類が豊富で使っていて楽しいです。

アニメーションのカテゴリが10種類あって、組み合わせると55種類あります!

アニメーション追加方法

ブロックを選択→Animations→Loading Animationsを選択し、追加したいアニメーションを選ぶ

アニメーションのパターン

Backing

Bouncing

Fading

Flipping

Rotating

Sliding

Zooming

Rolling

Light Speed

Other

となっています!

ヨメ

これだけ見てもワクワクする!

ここからそれぞれの動きを全部紹介するよ!

Backing~4種類~

Back In Down

Back In Left

Back In Right

Back In Up

Bouncing~6種類~

Bounce

Bounce In

Bounce In Down

Bounce In Left

Bounce In Right

Bounce In Up

Fading~12種類~
Fading

Fade In

Fading

Fade In Down

Fading

Fade In Down Big

Fading

Fade In Left

Fading

Fade In Left Big

Fading

Fade In Right

Fading

Fade In Right Big

Fading

Fade In Up

Fading

Fade In Top Left

Fading

Fade In Top Right

Fading

Fade In Bottom Left

Fading

Fade In Bottom Right

Flipping~3種類~
Flipping

Flip

Flipping

Flip In X

Flipping

Flip In Y

Rotating~5種類~
Rotating

Rotate In

Rotating

Rotate In Down Left

Rotating

Rotate In Down Right

Rotating

Rotate In Up Left

Rotating

Rotate In Up Right

Sliding~4種類~
Sliding

Slide In Down

Sliding

Slide In Left

Sliding

Slide In Right

Sliding

Slide In Up

Zooming~5種類~
Zooming

Zoom In

Zooming

Zoom In Down

Zooming

Zoom In Left

Zooming

Zoom In Right

Zooming

Zoom In Up

Rolling~1種類~
Rolling

Roll In

Light Speed~2種類~
Light Speed

Light Speed In Left

Light Speed

Light Speed In Right

Other~13種類~
Other

Flash

Other

Pulse

Other

Rubber Band

Other

Shake X

Other

Shake Y

Other

Head Shake

Other

Swing

Other

TaDa

Other

Wobble

Other

Jello

Other

Heart Beat

Other

Hinge

Other

Jack In The Box

数字をカウントアップ~Count Animations~

Count Animationsは、数字を選択して適応することでカウントアップして元々の数字に変化するアニメーションを追加します。

1000

10000

100000

1000000000000000

こんなに数字が大きくても大丈夫!

アニメーション追加方法

数字を選択→テキストメニューの「」からCount Animationsを選ぶ

タイピング風のアニメーション~Typing Animations~

Typing Animationsは、タイピング風のアニメーションを追加してくれます。

めちゃくちゃカッコいいので個人的に好みです!

タイピング風に打つとこんな感じかな?

これをCSSとかでやると結構めんどうなんですよね…

アニメーション追加方法

文字を選択→テキストメニューの「」からTyping Animationsを選ぶ

アニメーションの設定について

ここからは追加できるアニメーションの設定について紹介します。

アニメーションには2つ設定が用意されていて、それぞれ以下の変更が出来ます!

  • DELAY→スタートするまでの時間
  • SPEED→アニメーションの速度
ヨメ

その2つだけだと設定は物足りなくない?

細かい設定がないからこそ使いやすいよ!

それぞれの設定の詳細についてまとめていきます。

DELAY

  • None
  • 100 Milliseconds→0.1秒遅らせる
  • 200 Milliseconds→0.2秒遅らせる
  • 500 Milliseconds→0.5秒遅らせる
  • One Seconds→1秒遅らせる
  • Two Seconds→2秒遅らせる
  • Three Seconds→3秒遅らせる
  • Four Seconds→4秒遅らせる
  • Five Seconds→5秒遅らせる

SPEED

  • Slow→2秒かけて終了
  • Slower→3秒かけて終了
  • Default→1秒かけて終了
  • Fast→0.8秒かけて終了
  • Faster→0.5秒かけて終了

実際に使って制作したデモサイト

ice-top

今回紹介したアニメーションを使ってアイスとパンケーキのお店をイメージしたサイトを作っています。

アニメーションが追加できることで、独自ブロックがサイト制作にもばっちり使えるテーマ「SWELL」との相性が抜群で、動きのあるサイトが作れます!

制作したデモサイトもよかったら覗いてみてください。

また、SWELLがサイト制作におすすめなブロックの紹介やおすすめの理由をまとめているので参考になると嬉しいです。

まとめ

今回のまとめ

今回はブロックにアニメーションを追加するプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」について紹介しました。

Blocks Animation: CSS Animations for Gutenberg Blocks
総合評価
( 4.5 )
メリット
  • 既存のブロックにアニメーションを付けることが出来る
  • アニメーションの種類が豊富
デメリット
  • 説明が英語
  • DELAYとSPEEDの2種類のみで細かい設定に向いてない

全文英語の為、最初は身構えてしまいますが、この記事を参考に動きを確認してもらえれば使いやすくなると思います!

動きのあるサイトはとても見栄えがよくなりますので、簡単にアニメーションを追加できるこのプラグインはWordPressでサイト制作するには必須のプラグインです!

また、当サイトではテーマ「SWELL」を使っていて、サイト制作におすすめなプラグインもまとめていますので併せて読んでくれると嬉しいです。

ヨメ

最後までお読みいただきありがとうございました。
みなさんの参考になれば嬉しいです。

当サイトでは自分の制作物の他にWebサイト制作で実際に行った学習や悩んだこと、WordPressのカスタマイズについてなども発信していますので、今後も読んで参考にしていただければと思います。

\ コンテンツの作りやすさ抜群の人気テーマ /

Blocks-Animation

この記事が気に入ったら
いいね または フォローしてね!

シェアしていただけると喜びます!
  • URLをコピーしました!

コメント

コメントする

目次