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

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

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

たとえば、

注意

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

注目

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

ポイント

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

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

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

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

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

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

この3パターン。

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

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

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

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

これです！

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

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

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

完成

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

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

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

これです！

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

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

完成

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

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

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

こんな感じ！

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

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

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

完成

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

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

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

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