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

広告:ページ内にてアフィリエイト広告を利用しています。

アニメーション演出のすすめ

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

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

SWELL おすすめサンプルページ
おしゃれサイト

\SWELL でオシャレサイトを作る方法は こちら をクリックしてください/

目次
PR

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

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

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

Blocks Animation: CSS Animations for Gutenberg Blocks

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

「Blocks Animation」の使い方

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

アニメーションの設定する画面

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

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

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

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

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

背後

上から移動後に拡大

アニメーションサンプル

左から移動後に拡大

アニメーションサンプル

右から移動後に拡大

アニメーションサンプル

下から移動後に拡大

アニメーションサンプル

バウンス

バウンス

アニメーションサンプル

バウンスイン

アニメーションサンプル

下へバウンス

アニメーションサンプル

左へバウンス

アニメーションサンプル

右へバウンス

アニメーションサンプル

上へバウンス

アニメーションサンプル

フェード

フェードイン

アニメーションサンプル

下へフェードイン

アニメーションサンプル

下へ大きくフェードイン

アニメーションサンプル

左へフェードイン

アニメーションサンプル

左へ大きくフェードイン

アニメーションサンプル

右へフェードイン

アニメーションサンプル

右へ大きくフェードイン

アニメーションサンプル

上へフェードイン

アニメーションサンプル

左上からフェードイン

アニメーションサンプル

右上からフェードイン

アニメーションサンプル

左下からフェードイン

アニメーションサンプル

右下からフェードイン

アニメーションサンプル

裏返し

裏返す

アニメーションサンプル

横に裏返す

アニメーションサンプル

縦に裏返す

アニメーションサンプル

入れ替わり

中央支点で回転

アニメーションサンプル

左を支点に上から回転

アニメーションサンプル

右を支点に上から回転

アニメーションサンプル

左を支点に下から回転

アニメーションサンプル

右を支点に下から回転

アニメーションサンプル

スライド

上からスライドイン

アニメーションサンプル

左からスライドイン

アニメーションサンプル

右からスライドイン

アニメーションサンプル

下からスライドイン

アニメーションサンプル

ズーム

ズームイン

アニメーションサンプル

下へズームイン

アニメーションサンプル

左へズームイン

アニメーションサンプル

右へズームイン

アニメーションサンプル

上へズームイン

アニメーションサンプル

ローリング

ロールイン

アニメーションサンプル

差し込み

右から差し込む

アニメーションサンプル

左から差し込む

アニメーションサンプル

その他

フラッシュ

アニメーションサンプル

脈打つ

アニメーションサンプル

輪ゴム

アニメーションサンプル

横方向に揺らす

アニメーションサンプル

縦方向に揺らす

アニメーションサンプル

ブレ

アニメーションサンプル

揺れる

アニメーションサンプル

TaDa

アニメーションサンプル

ふらつき

アニメーションサンプル

ゼリー

アニメーションサンプル

鼓動

アニメーションサンプル

蝶番

Jack in the box

アニメーションサンプル

PR

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

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

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

シルエット画像

本記事ではイメージ無料素材サイト「ACシリーズ」からシルエット画像を利用しています。

SWELL おしゃれサイト作り方

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

PR

PR

一番上に戻る(Back to the initial position on click.)

トップページ(Home.)

PR
Amazon でお買い物
楽天市場でお買い物
広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

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

目次