流し読みする読者の目を止める方法として、見出しのアイコンを動かす方法があります。
たとえば、
こんな動きもAFFINGER6なら可能です。
それでは具体的な手順を解説していきます。
見出しのアイコンを動かすには？
見出しのアイコンを動かすには、アニメーションの「CSS クラス」を追加する必要があります。
たとえば、チェックマークを震わせるには「ベル揺れ」のCSSクラス［st-ring-icon］を。
チェックマークを動かす
アイコンを点滅させるには、「点滅」 のCSSクラス［st-flash-icon］。
アイコンを点滅させる
その他にも、
横揺れ［st-horizontal-icon］
アイコンを横揺れさせる
回転［st-rotation-icon］
アイコンを回転させる
なんてことも可能です。
AFFINGER6で使用できるアニメーションクラスはこちらの表を確認してください。
見出しのチェックマークを動かす手順
見出しのチェックマークには2パターンあります。
- カスタマイザーで、Hタグを「チェック（ボックスタイプ）デザイン」に変更パターン
- 見出しのブロックスタイルを「チェック」にするパターン
ここでは、カスタマイザーでH3タグを「チェック（ボックスタイプ）デザイン」に変更したパターンで進めていきます。
こちらのデザインのほうがかっこいいからです（笑）。
１．まずは、チェックボックスの見出しブロック（H3）を挿入します。
２．見出しを選択した状態で、ブロックメニューを一番下までスクロールします。
「高度な設定」という項目があるのでクリックして開きます。
３．「追加 CSS クラス」の欄に、追加したいアニメーションのコードを入力します。
ベル揺れは、チェックマークだけが動きます！
ちなみに、追加 CSS クラスに違うアニメーションクラスを追加すると、以下のようになります。
拡大（ゆれ）を使うとこんな感じで動きます！
AFFINGERのボックスのWEBアイコンを動かす方法もあります。
※詳しくはこちらの記事をチェックしてください！
