100%目立つ！WEBアイコンやふきだしを動かす方法

AFFINGER6には「アニメーション」機能があります。

アニメーションを使うことで、ボックスのアイコンを動かしたり、ブロック全体を動かしたりということが簡単にできます。

たとえば、

注意

ふきだしをバウンドさせたり・・・

注目

まるもじのアイコンを横揺れさせたり・・・

ポイント

ふきだしをふわふわさせつつアイコンをブルブルさせたり・・・

といったことが簡単にできます。

ブロックスタイルにアニメーションを追加する方法

今回アニメーションクラスを追加するのは、段落スタイルの「ふきだし」と「まるもじ」です。

手順として解説するのは、

1. ふきだし全体を動かすパターン
2. まるもじのアイコンのみを動かすパターン
3. ふきだし全体とアイコン両方動かすパターン

この3パターン。

「追加CSSクラス」を記載することで、アニメーション効果を追加することができます。

アニメーションのCSSクラス表

アニメーション	全体のCSSクラス	アイコンのCSSクラス
45°揺れ	st-wrench animated	st-wrench-icon
ベル揺れ	st-ring animated	st-ring-icon
横揺れ	st-horizontal animated	st-horizontal-icon
縦揺れ	st-vertical animated	st-vertical-icon
点滅	st-flash animated	st-flash-icon
バウンド	st-bounce animated	st-bounce-icon
回転	st-rotation animated	st-rotation-icon
ふわふわ	st-float animated	st-float-icon
大小	st-pulse animated	st-pulse-icon
シェイク	st-shake-s animated	st-shake-s-icon
シェイク（強）	st-shake animated	st-shake-icon
拡大（ゆれ）	st-tada animated	st-tada-icon
過ぎる	st-passing animated	st-passing-icon
戻る	st-passing-reverse animated	st-passing-reverse-icon
バースト	st-burst animated	st-burst-icon
落ちる	st-falling animated	st-falling-icon

ふきだし全体を動かすアニメーションパターン

まずは「ふきだし」スタイル全体をバウンドさせる手順を解説します。

これです！

１．段落ブロックに文字を挿入したあと、段落ブロック編集の「ふきだし」を選択する。

２．テキスト色と背景色、そしてアイコンを選択します。

３．ブロック設定の一番下にある「高度な設定」を開き、「追加 CSS クラス」にバウンドのCSS［st-bounce animated］を追加します。

完成

これで、ふきだし全体を動かすアニメーションパターンは完成です！

まるもじのアイコンのみを動かすパターン

まるもじの中のアイコンのみを動かす手順を解説します。

これです！

１．段落ブロック編集の「まるもじ」を選択し、テキスト色と背景色、そしてアイコンを選択します。

２．「高度な設定」を開き、すでに入力されているコードの一番うしろに「半角スペース」を入れ、続いて［st-horizontal-icon］を入力します。

完成

これで、まるもじのアイコンのみを動かすアニメーションパターンは完成です！

ふきだし全体とアイコン両方動かすパターン

最後に、ふきだし全体とアイコン両方動かす手順を解説します。

こんな感じ！

１．段落ブロック編集の「ふきだし」を選択し、テキスト色と背景色、そしてアイコンを選択します。

２．「高度な設定」を開き、すでに入力されているコードの一番先頭に ふわふわ のコード［st-float animated］を貼り付け、すぐ後ろに「半角スペース」を入れる。

続いて「ベル揺れ」のコード［st-ring-icon］を貼り付け、そのすぐ後ろに「半角スペース」を入力します。

完成

これで、ふきだし全体とアイコンを動かすアニメーションパターンは完成です！

アニメーションを使って目立たせよう！

見出しのアイコンを動かす方法や、

ボックスのアイコンを動かす手順も合わせて活用してください。