アニメーション

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

AFFINGER6には「アニメーション」機能があります。アニメーションを使うことで、ボックスのアイコンを動かしたり、ブロック全体を動かしたりということが簡単にできます。たとえば、注意ふきだしをバウンドさせたり・・・注目まるもじのアイコンを横揺れさせたり・・・ポイントふきだしをふわふわさせつつアイコンをブルブルさせたり・・・といったことが簡単にできます。ブロックスタイルにアニメーションを追加する方法今回アニメーションクラスを追加するのは、段落スタイルの「ふきだし」と「まるもじ」です。 ...

AFFINGER6で見出しのチェックマークを動かす方法

流し読みする読者の目を止める方法として、見出しのアイコンを動かす方法があります。たとえば、こんな動きもAFFINGER6なら可能です。それでは具体的な手順を解説していきます。見出しのアイコンを動かすには？見出しのアイコンを動かすには、アニメーションの「CSS クラス」を追加する必要があります。たとえば、チェックマークを震わせるには「ベル揺れ」のCSSクラス［st-ring-icon］を。チェックマークを動かすアイコンを点滅させるには、「点滅」のCSSクラス［st-flash-icon］。 ...

AFFINGER6でボックスの「アイコン」を動かす方法

「ボックスのアイコンを動かせたら目立つのにな～」「どうしても読者に気づかせたい場所がある！」という場合、AFFINGER6なら簡単にできます。「追加CSSクラス」アニメーションコードを追加するだけOKです。ここがポイントこんな感じで、目立たせたいところのアイコンを動かすことができます。今回紹介する方法で、メモボックスマイボックス見出し付きボックスバナー風ボックスこの4つのアイコンにアニメーションをかけることができます。これは「メモボックス」ですポイントこれは「マイボックス」です詳細 ...