WINGカスタマイズ

AFFINGER5(WING)のアニメーションが動かない?解決法とマウスオーバー方法も

アニメーション

動くところに目が行くのは、本能と言ってもいいかもしれません。

と、いうことは、文字が動いたら…無意識に目が行く、注目してもらえるかもしれませんよね。

 

WING(AFFINGER5)では、文字にアニメーションを付けて動かすことも簡単なんです。

 

今回は、アニメーションについて紹介していきたいと思います。

 

WING(AFFINGER5)アニメーション機能の使い方は?

WING(AFFINGER5)のアニメーションの使い方は簡単。

 

「タグ」「ショートコード補助」「アニメーション(クラス)」を選択します。

 

アニメーション

アニメーションでは、16種類の動きを選ぶことができますよ。

ドラッグで文字を選択して、または画像を選択してから、アニメーションを選んでくださいね。

 

しかし、しかし、残念ながら私の場合(バージョン20200414)では反映されていませんでした。

文字を選択して、「ショートコード補助」から「アニメーション」を選んでも、元の文字や画像が消えてしまうのです。

AMP化しているからでしょうか。

 

ひよこさん
じゃあアニメーションで動かせないってこと?ショック―
アフィ主婦
そんなことないわよー!

 

「スタイル」からでも「アニメーション」を選択することができて、こちらからだと動くんです。

アニメーション

わぁーひよこさんも喜んでくれています。(”シェイク”使用)

 

アニメーションが動かないときスタイルを表示させるには?

良かった、一件落着…と思いきや、自分の記事投稿画面に「スタイル」がない!という方はいませんか?

 

「スタイル」は、プラグイン「TinyMCE Advanced」を入れることで表示できます。

設定画面のブロックエディターでも旧エディターでも、ツールバーに「スタイル」を移動させることで記事投稿画面に「スタイル」が反映されます。

 

便利なので、入れておいて損はないと思います。

 

WING(AFFINGER5)アニメーションの種類

WING(AFFINGER5)のアニメーションは、文字でも画像でも動かすことができます。

アニメーション

記事投稿画面では、このように「動」マークが目印に表示されます。

 

45°揺れ

ベル揺れ

横揺れ

縦揺れ

点滅

バウンド

回転

ふわふわ 

大小

シェイク

シェイク(強)

拡大(ゆれ)

過ぎる

戻る

バースト

落ちる

 

マウスオーバーアニメーションの方法

マウスオーバーで、例えば、下のひよこさんにマウスカーソルが重なったときにアニメーション(”バウンド”使用)で動くようになっています。

マウスカーソルが離れると、動かなくなるので控えめでいいですよね。

 

アニメーションをマウスオーバーにするのは簡単で、クラスの後ろに「-hover」をつけるだけです。

こちらは、「アニメーション」という文字を動かそうとしています。

 

クラシックエディターでいう、テキストモードで

faa-wrench animated のすぐ後に「-hover」をつけ、「faa-wrench animated-hover  」とすると、

ずっと動いているアニメーションから、マウスオーバーのアニメーションになります。

 

WING(AFFINGER5)のアニメーションが動かない?解決法とマウスオーバー方法も まとめ

WING(AFFINGER5)アニメーション機能で動かすときの注意点をまとめてみました。

 

アニメーション機能は、AFFINGER5及びEX版のver20180807以上の機能です。

 

AMP不可となっていましたので、AMP化されている場合は動かないようです。

(「スタイル」からお試しください)

 

同じ範囲に2種類のアニメーションはつけられません。

 

簡単な操作で、インパクトのあるアニメーションをつけることができるので、WING(AFFINGER5)をもっとよく知りたい方は、こちらのページで詳しく書いています。

人気の投稿とページ

-WINGカスタマイズ
-

© 2020 あぶログ