悩む人アニメーションをブロックやアイコンに付けたいです。プログラミングは分からないのでコードを書かずにアニメーションを付ける方法を教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 「Blocks Animation」でブロックにアニメーションを付ける方法
- 「Font Awesome」のアイコンにアニメーションを付ける方法
是非、最後までご覧ください。
【SWELL】アニメーションをブロックとアイコンに付ける方法
以下の順番で解説していきます。
- 「Blocks Animation」でブロックにアニメーションを付ける
- 「Font Awesome」のアイコンにアニメーションを付ける
「Blocks Animation」でブロックにアニメーションを付ける
「Blocks Animation」とは
- CSSアニメーションを追加できるプラグイン
- Gurtenbergの全ブロックに対応
- インストール後すぐに利用できる（初期設定なし）
- 編集画面からアニメーションの確認ができる（「アニメーションを再生」ボタンがあり繰り返し見直しができる）
※下記動画を参照 - コードを書く必要一切なし
- 現在も開発が続いているためセキュリティ面の心配も少ない
公式サイト
編集画面からアニメーションの確認ができる
※「アニメーションを再生」ボタンがあり繰り返し見直しができます。
プレビュー画面を開かずに確認できるのには感動しました🥹
アニメーションは全部で５５パターン
※2023年10月25日時点
- 上から移動後に拡大
- 左から移動後に拡大
- 右から移動後に拡大
- 下から移動後に拡大
- バウンド
- バウンスイン
- 下へバウンスイン
- 左へバウンスイン
- 右へバウンスイン
- 上へバウンスイン
- フェードイン
- 下へフェードイン
- 下へ大きくフェードイン
- 左へフェードイン
- 左へ大きくフェードイン
- 右へフェードイン
- 右へ大きくフェードイン
- 上へフェードイン
- 左上からフェードイン
- 右上からフェードイン
- 左下からフェードイン
- 右下からフェードイン
- 裏返す
- 横に裏返す
- 縦に裏返す
- 中央支点で回転
- 左を支点に上から回転
- 右を支点に上から回転
- 左を支点に下から回転
- 右を支点に下から回転
- 上からスライドイン
- 左からスライドイン
- 右からスライドイン
- 下からスライドイン
- ズームイン
- 下へズームイン
- 左へズームイン
- 右へズームイン
- 上へズームイン
- ロールイン
- 右から差し込む
- 左から差し込む
- フラッシュ
- 脈打つ
- 輪ゴム
- 横方向から揺らす
- 縦方向に揺らす
- ブレ
- 揺れる
- TaDa
- ふらつき
- ゼリー
- 鼓動
- 蝶番
- Jack in The Box
「Blocks Animation」のインストール
管理画面メニューから、「プラグイン」＞「新規追加」を選択します。
「プラグインの検索…」に下記をコピペします。
Blocks Animationを「インストール」＞「有効化」します。
「Blocks Animation」の使用方法
管理画面メニューから、「投稿」＞「新規追加」を選択します。
（ブロック挿入ツールを切り替え）から、「ブロック」＞「メディア」＞「画像」を選択します。
画像ブロックをクリックしてから、「アップロード」または「メディアライブラリ」より画像を挿入します。
画像ブロックをクリックしてから、「設定」＞「ブロック」＞「アニメーション」を選択します。
- アニメーション：「55パターン」から選択できます。
- 遅延：「なし・100ミリ秒・200ミリ秒・500ミリ秒・1秒・2秒・3秒・4秒・5秒」から選択できます。
- 速度：「やや低速・低速・デフォルト・やや高速・高速」から選択できます。
これで画像ブロックにアニメーションが付きました。
「カウントアニメーション」「タイピングアニメーション」については後ほど解説します。
アニメーション全55パターンを一挙紹介
※ 最後から2番目の蝶番のアニメーションが分かりづらいです🙇
カウントアニメーション
※プレビュー画面からの確認が必要です。
数字を全選択してから、「（全てを表示）」＞「カウントアニメーション」を選択します。
表示されたカウントアニメーションから以下を選択します。
- 遅延：「なし・100ミリ秒・200ミリ秒・500ミリ秒・1秒・2秒・3秒・4秒・5秒」から選択できます。
- 速度：「やや低速・低速・デフォルト・やや高速・高速」から選択できます。
プレビュー画面で確認
タイピングアニメーション
※プレビュー画面からの確認が必要です。
表示されたタイピングアニメーションから以下を選択します。
- 遅延：「なし・100ミリ秒・200ミリ秒・500ミリ秒・1秒・2秒・3秒・4秒・5秒」から選択できます。
- 速度：「やや低速・低速・デフォルト・やや高速・高速」から選択できます。
プレビュー画面で確認
「Font Awesome」のアイコンにアニメーションを付ける
「Font Awesome」とは
- WebサイトにやなどのWebアイコンフォントを表示させることのできるサービス
- 有料版と無料版を合わせると「26,233」種類あり、無料版だけでも「2,025」種類ある ※2023年10月25日時点
- カラーやサイズ、向きを変えたり、アニメーションを付けることもできる
SWELLで「Font Awesome」を使えるようにする
管理画面メニューから、「SWELL設定」＞「SWELL設定」を選択します。
タブを「Font Awesome」に切り替えて下記の設定にします。
- 読み込み方：「CSSで読み込む」を選択します。
- バージョン：「v6」を選択します。
これでSWELLで「Font Awesome」が使えるようになりました。
「Font Awesome」にアクセス
下記から公式サイトに移動します。
トップページの「Icons」を選択します。
「2,025 free and open-source icons」を選択します。
※2023年10月25日時点では、無料で使えるアイコンが「2,025点」あります。
アイコンの一覧ページが表示されました。
アイコンに付けるアニメーションを決める
アニメーションは全部で9パターン
※2023年10月25日時点
- Beat
- Beat Fade
- Bounce
- Fade
- Flip
- Shake
- Spin
- Spin Reverse
- Spin Pulse
表示させたいアイコンを探して開いてから、「No Animation」よりアニメーションを選択します。
下記画像では、「Beat」を選択しています。
「<i class="○○"></i>」の○○の部分は後ほど使います（コピペします）。
アイコンにアニメーションを付ける
管理画面メニューから、「投稿」＞「新規追加」を選択します。
下記のショートコードをコピペします（どちらでも使用できます）。
[icon class="ここにアイコンのクラス名"]
[アイコン class="ここにアイコンのクラス名"]
「ここにアイコンのクラス名」に先ほどのコードをコピペします。
先ほどのコードとは、「<i class="○○"></i>」 の○○です。
※ショートコードのテキスト色を変えるとアイコンがその色で表示されます。
これでアイコンにアニメーションが付きました。
アニメーション全9パターンを一挙紹介
Beat
Beat Fade
Bounce
Fade
Flip
Shake
Spin
Spin Reverse
Spin Pulse
今回は以上です。