広告:ページ内にてアフィリエイト広告を利用しています。
![アニメーション演出のすすめ](https://boonboonswell.com/wp-content/uploads/2023/07/2022026710-1024x576.jpg)
ブログサイトはポイントでアニメーション演出を利用するとインパクトのあるデザインにできますね。
WordPressのテーマ「SWELL」でアニメーションを利用する場合は、アニメーション用のプラグインを用いるのが簡単です。プラグイン「Blocks Animation」を解説します。
「Blocks Animation」のインストール方法
「Blocks Animation」は正式には「Blocks Animation: CSS Animations for Gutenberg Blocks」と言います。
ブロックエディタ用のアニメーションを追加できるプラグインです。
WordPress の管理画面から「プラグイン」を選択し、「新規作成」画面にて、「Blocks Animation」名で検索することでプラグインが見つかりますので画面上の手順に沿ってインストールします。
「Blocks Animation」の使い方
アニメーションの設定は簡単です。
WordPress の記事投稿画面でアニメーションさせたいブロックを選択することで右側の設定項目に「アニメーション」が表示されます。
プルダウンから実際に動かしたいアニメーション方法を選択します。
あわせて「遅延」や「速度」を設定することができます。
アニメーションのサンプル
実際にアニメーションのサンプルを見てみましょう
背後
上から移動後に拡大
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023939.jpg)
左から移動後に拡大
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023940.jpg)
右から移動後に拡大
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023950.jpg)
下から移動後に拡大
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023951.jpg)
バウンス
バウンス
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023952.jpg)
バウンスイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023953.jpg)
下へバウンス
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023954.jpg)
左へバウンス
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023955.jpg)
右へバウンス
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023956.jpg)
上へバウンス
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023957.jpg)
フェード
フェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023961.jpg)
下へフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023962.jpg)
下へ大きくフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023963.jpg)
左へフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023964.jpg)
左へ大きくフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023965.jpg)
右へフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023966.jpg)
右へ大きくフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023980.jpg)
上へフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023967.jpg)
左上からフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023968.jpg)
右上からフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023969.jpg)
左下からフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023970.jpg)
右下からフェードイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023971.jpg)
裏返し
裏返す
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023981.jpg)
横に裏返す
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023982.jpg)
縦に裏返す
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023983.jpg)
入れ替わり
中央支点で回転
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023984.jpg)
左を支点に上から回転
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023985.jpg)
右を支点に上から回転
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023986.jpg)
左を支点に下から回転
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023987.jpg)
右を支点に下から回転
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023988.jpg)
スライド
上からスライドイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023991.jpg)
左からスライドイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023992.jpg)
右からスライドイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023993.jpg)
下からスライドイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022023990.jpg)
ズーム
ズームイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024003.jpg)
下へズームイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024004.jpg)
左へズームイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024002.jpg)
右へズームイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024001.jpg)
上へズームイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024000.jpg)
ローリング
ロールイン
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024005.jpg)
差し込み
右から差し込む
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024006.jpg)
左から差し込む
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024007.jpg)
その他
フラッシュ
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024009.jpg)
脈打つ
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024010.jpg)
輪ゴム
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024008.jpg)
横方向に揺らす
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024011.jpg)
縦方向に揺らす
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024012.jpg)
ブレ
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024013.jpg)
揺れる
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024014.jpg)
TaDa
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024015.jpg)
ふらつき
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024016.jpg)
ゼリー
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024017.jpg)
鼓動
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024018.jpg)
蝶番
![](https://boonboonswell.com/wp-content/uploads/2023/05/2022024019.jpg)
Jack in the box
![アニメーションサンプル](https://boonboonswell.com/wp-content/uploads/2023/05/2022024020.jpg)
まとめ:SWELLでアニメーション演出を使う方法
SWELL でアニメーション演出を使う場合は、「Blocks Animation: CSS Animations for Gutenberg Blocks」プラグインを用いることで多様な演出が可能です。
SWELL を使って素敵なサイトをデザインしてくださいね。
本記事ではイメージ無料素材サイト「ACシリーズ」からシルエット画像を利用しています。
一番上に戻る(Back to the initial position on click.)
![](https://boonboonswell.com/wp-content/uploads/2023/06/backtothetop2.jpg)
![Amazon でお買い物](https://boonboonswell.com/wp-content/uploads/2023/06/common_amazon.gif)
![楽天市場でお買い物](https://boonboonswell.com/wp-content/uploads/2023/06/common_rakuten.gif)
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。