【SWELL】アニメーション演出を利用する方法「Blocks Animation」プラグイン

ブログサイトはポイントでアニメーション演出を利用するとインパクトのあるデザインにできますね。

WordPressのテーマ「SWELL」でアニメーションを利用する場合は、アニメーション用のプラグインを用いるのが簡単です。プラグイン「Blocks Animation」を解説します。

「Blocks Animation」のインストール方法

「Blocks Animation」は正式には「Blocks Animation: CSS Animations for Gutenberg Blocks」と言います。

ブロックエディタ用のアニメーションを追加できるプラグインです。

WordPress の管理画面から「プラグイン」を選択し、「新規作成」画面にて、「Blocks Animation」名で検索することでプラグインが見つかりますので画面上の手順に沿ってインストールします。

「Blocks Animation」の使い方

アニメーションの設定は簡単です。

WordPress の記事投稿画面でアニメーションさせたいブロックを選択することで右側の設定項目に「アニメーション」が表示されます。

プルダウンから実際に動かしたいアニメーション方法を選択します。

あわせて「遅延」や「速度」を設定することができます。

アニメーションのサンプル

実際にアニメーションのサンプルを見てみましょう

背後

バウンス

フェード

裏返し

入れ替わり

スライド

ズーム

ローリング

差し込み

その他

まとめ：SWELLでアニメーション演出を使う方法

SWELL でアニメーション演出を使う場合は、「Blocks Animation: CSS Animations for Gutenberg Blocks」プラグインを用いることで多様な演出が可能です。

SWELL を使って素敵なサイトをデザインしてくださいね。