AFFINGER5 機能紹介

見る人も楽しい豊富な「アニメーション」機能

サンプルはコチラ

AFFINGER には様々な動きでユーザーを愉しましたり表現を豊かにする「動き(モーション)」を用意しています。

動くアニメーションタグ

AFFINGER5及びEX版のver20180807以上の機能です

アニメーションが簡単に設定できるクイックタグを追加しました。

使い方

結果これは揺れるテストです

動かしたいテキストや画像を選択して「スタイル」>「アニメーション」より任意の動きを選択します。

原則としてはエディタ上では目印に[動]マークが付与されます。

Font Awesome Animationを利用しているので表示、利用環境はそれに順じます。

Webアイコンを動かす

ショートコードのfontawesomeのアイコンを設定する箇所で「タグ」>「ショートコード補助」>「アニメーション(クラス)」で用意されたクラスを付与するとアイコンに動きをつけることが可能になります。

結果

これはテストです

これはテストです

他にも以下の様な種類があります。マウスオーバー要はマウスオーバーした時に動きをつけるクラスです。

動き サンプル クラス マウスオーバー用
45°揺れ サンプル faa-wrench animated faa-wrench animated-hover
ベル揺れ サンプル faa-ring animated faa-ring animated-hover
横揺れ サンプル faa-horizontal animated faa-horizontal animated-hover
縦揺れ サンプル faa-vertical animated faa-vertical animated-hover
点滅

サンプル

faa-flash animated faa-flash animated-hover
バウンド サンプル faa-bounce animated faa-bounce animated-hover
 回転

サンプル

faa-spin animated faa-spin animated-hover
ふわふわ サンプル faa-float animated faa-float animated-hover
大小 サンプル faa-pulse animated faa-pulse animated-hover
シェイク サンプル faa-shake animated faa-shake animated-hover
シェイク(大) サンプル st-shake st-shake-hover
拡大(ゆれ) サンプル faa-tada animated faa-tada animated-hover
過ぎる サンプル faa-passing animated faa-passing animated-hover
戻る サンプル faa-passing-reverse animated faa-passing-reverse animated-hover
バースト サンプル faa-passing-reverse animated faa-passing-reverse animated-hover
落ちる サンプル faa-falling animated faa-falling animated-hover

※AMP不可

WING(AFFINGER5)を手に入れる

販売ページへ


※AMPページには対応していません

-AFFINGER5, 機能紹介

Copyright© AFFINGER(WING) , 2019 All Rights Reserved Powered by AFFINGER5.