SWELLのブロックに動きを付ける方法の1つが、Blocks Animationです。ブロック設定のサイドバーからCSSアニメーションを選べるため、この方法では自分でJavaScriptを書く必要がありません。
プラグインを有効化後、対象ブロックを選んで右側メニューからアニメーションを指定します。
遅延や再生速度のほか、ホバー時再生や発動位置の調整も可能です。
数字を増減させるカウントや、一文字ずつ表示するタイピングなどの効果も選べます。
SWELLで使えるBlocks Animationsの使い方
まずはBlocks Animationで検索してプラグインを有効にしておきましょう。
使い方は簡単です。
アニメーションをつけたいブロックを選択して、右側のメニューから使いたいアニメーション選択するだけです。
SWELLで使えるBlocks Animationsのオプション
アニメーションを選ぶだけでなく、細かくチューニングもできます。
遅延
- なし
- 100ミリ秒
- 200ミリ秒
- 500ミリ秒
- 1秒
- 2秒
- 3秒
- 4秒
- 5秒
- Custom
スピード
- やや低速
- 低速
- デフォルト
- やや高速
- 高速
- Custom
Play on Hover
「Play on Hover」オプションは、アニメーションをマウスオーバー（ホバー）時に再生するかどうかを設定する機能です。
このオプションを有効にすると、ユーザーが特定の要素にマウスカーソルを合わせたときにのみアニメーションが実行されます。
これにより、インタラクティブなエフェクトを追加して、ユーザーの注目を引きやすくすることができます。
Trigger Offset
「Trigger Offset」オプションは、アニメーションが発動するトリガーの位置を画面に対して相対的に調整する機能です。
このオプションを使用すると、要素が画面内にどの程度スクロールされたときにアニメーションを開始するかを細かく制御することができます。
カウントアニメーション
主に数字のテキストで使います。
カウントアニメーションは、数字が増加または減少するアニメーションを指定する機能です。
このアニメーションを使用することで、カウンターの値が時間とともに変化するような視覚効果を実現できます。
タイピングアニメーション
主にテキストで使います。
タイピングアニメーションは、テキストが一文字ずつ表示されるかのようなアニメーションを指定する機能です。
このアニメーションを使用することで、まるでキーボードでタイピングしているかのような視覚効果を実現できます。
Blocks Animationの動きのサンプル
以下は、このページに設定した動きの見本です。カウント、タイピング、動きを付けない「なし」の例も含めています。選べる効果や設定項目は、プラグインのバージョンによって異なる場合があります。
カウントアニメーション
タイピングアニメーション
なし
一応、OFFにする機能も用意されています。
上から移動後に拡大
左から移動後に拡大
右から移動後に拡大
下から移動後に拡大
バウンス
バウンスイン
下へバウンスイン
左へバウンスイン
右へバウンスイン
上へバウンスイン
フェードイン
下へフェードイン
下へ大きくフェードイン
左へフェードイン
左へ大きくフェードイン
右へフェードイン
右へ大きくフェードイン
上へフェードイン
左上からフェードイン
右上からフェードイン
左下からフェードイン
右下からフェードイン
裏返す
横に裏返す
縦に裏返す
中央支点で回転
左を支点に上から回転
右を支点に上から回転
左を支点に下から回転
右を支点に下から回転
上からスライドイン
左からスライドイン
右からスライドイン
下からスライドイン
ズームイン
下へズームイン
左へズームイン
右へズームイン
上へズームイン
ロールイン
右から差し込む
左から差し込む
フラッシュ
脈打つ
輪ゴム
横方向に揺らす
縦方向に揺らす
ブレ
揺れる
TaDa
ふらつき
ゼリー
鼓動
蝶番
Jack In The Box
まとめ
アニメーションは特に視覚効果として有効ですが、使いすぎるとUXを損ないます。
動きは必要な箇所に絞り、ホバーできないスマホでも内容やリンクに到達できるようにします。OSやブラウザで動きを減らす設定を使う読者にも、内容が隠れないことを確認してください。
本稿の見直しでは公開本文とプラグインの公式説明を照合しました。2026年10月11日の管理画面ではWordPress 7.1.3、SWELL 2.19.0、Blocks Animation 3.2.7と、遅延・速度・Play on Hover・Trigger Offsetの設定欄を確認しました。掲載中の操作画像は旧画面の記録です。掲載見本を作った環境のバージョン、現行版での全効果、実機操作、動きを減らす設定での表示は未確認です。
よくある質問：SWELLでBlocks Animationを使うときのポイント
Blocks Animationでは、JavaScriptを書く必要がありますか？
必要ありません。記事では、ブロック設定のサイドバーからCSSアニメーションを選べるため、この方法では自分でJavaScriptを書く必要がないとしています。
どうやってブロックに動きを付けますか？
記事では、プラグインを有効化後、アニメーションをつけたいブロックを選択して、右側のメニューから使いたいアニメーションを選択します。
動きの細かい調整はできますか？
記事では、遅延（なし、100ミリ秒、200ミリ秒、500ミリ秒、1秒〜5秒、Custom）、スピード（やや低速、低速、デフォルト、やや高速、高速、Custom）のほか、ホバー時に再生する「Play on Hover」と、発動位置を調整する「Trigger Offset」の設定ができます。
「Trigger Offset」は、何を調整しますか？
記事では、アニメーションが発動するトリガーの位置を画面に対して相対的に調整する機能で、要素が画面内にどの程度スクロールされたときにアニメーションを開始するかを細かく制御できます。
数字や文字に使える動きはありますか？
あります。記事では、数字のテキストに使うカウントアニメーション（数字が増加または減少する）と、テキストに使うタイピングアニメーション（一文字ずつ表示される）を紹介しています。動きを付けない「なし」も選べます。
アニメーションは、たくさん使ってよいですか？
記事では、アニメーションは特に視覚効果として有効ですが、使いすぎるとUXを損なうとしています。動きは必要な箇所に絞り、ホバーできないスマホでも内容やリンクに到達できるようにします。OSやブラウザで動きを減らす設定を使う読者にも、内容が隠れないことを確認してください。
選べる効果は、いつの版の情報ですか？
記事では、選べる効果や設定項目は、プラグインのバージョンによって異なる場合があるとしています。2026年10月11日の管理画面でWordPress 7.1.3、SWELL 2.19.0、Blocks Animation 3.2.7と、遅延・速度・Play on Hover・Trigger Offsetの設定欄を確認しました。掲載中の操作画像は旧画面の記録で、現行版での全効果や実機操作、動きを減らす設定での表示は未確認です。
