ポク太郎です。
ブログ、ホームページを華やかにするアニメーション。簡単に文字、画像を回転させることができます。
ここでは二つの方法を紹介します。
方法1：Font Awesomeの機能を使う
使い方はこう。
<HEAD>～</HEAD>の内部に下を記述。
うちのようにGoogleのBloggerの場合は少し書き方が異なり、
<link async=’async’ href=’https://use.fontawesome.com/releases/v5.0.6/css/all.css’ rel=’stylesheet’/>
上の準備をした上で、ページのHTMLに下のように書くと、
あいうえお |
次に、「あいうえお」の代わりにポク太郎の顔にすると、
 |
つまり、<i></i>タグにfabとfa-spinなるクラスを付ける（複数の場合は半角スペースで区切る）と、タグに挟まれた要素が回転します。
その要素にGIFアニメーションを指定することも可。ちゃんと動いたまま回転動作がプラスされます。
 |
以上がFont Awesomeを使用した回転方法でした。
余談ですが、Font Awesomeでは多様なWebフォントがFont Awesomeのページで公開されています。
使い方は、使いたいWebフォントの「名称」を上記ページで調べ、
とすることで表示できます。
例えば、こう書くとプレイステーション。
同様に「fa-spin」属性を追加することで回転できます。
方法2：CSS3を使う
そこで、株式会社オンズのブログに投稿されたISSEIさんと言う方の方法を参考にします。
CSSにこう書きます。
width: auto;/* ←画像サイズ一定なら数値指定できるが */
height: auto;/* ←画像サイズ一定なら数値指定できるが */
background:
-webkit-animation: spin 2.5s linear infinite;
-moz-animation: spin 2.5s linear infinite;
-ms-animation: spin 2.5s linear infinite;
-o-animation: spin 2.5s linear infinite;
animation: spin 2.5s linear infinite;
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% {-ms-transform: rotate(0deg);}
100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% {-o-transform: rotate(0deg);}
100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
ただし、方法1のときと同じ様に書くと、親要素（今の場合はブログの記事幅）を直径として回ってしまいます。
<div class=”rotation”><img src=”「画像のURL」”></div>
|
←
|
||
| ロケットのように飛んでるこれ。 | ||
この動きは目的とは違います。回避する方法としては、表の中に表示し枠線を非表示に。
|
|
←これ枠線を非表示にした表の中。 |
表示のさせ方を少し工夫しないといけませんが、方法2の場合は外部のURLを参照することなく実現できます。
Webフォントは便利だしそんなに重い訳ではないので、方法1がおススメ。
ただし方法2の方は自分で好きなようにカスタマイズできるので、CSSの時間部分2.5sを書き換えて回転数を変えることも可能。
|
|
使い分けできるよう理解しておくのが一番です。
コメント