画像、文字をクルクル回転させる方法二つ|WEB製作|簡単アニメーション

画像の角度を変更して編集する話でなく、Web上で回転アニメーションを表示する話です。

ポク太郎です。

ブログ、ホームページを華やかにするアニメーション。簡単に文字、画像を回転させることができます。

ここでは二つの方法を紹介します。


方法1:Font Awesomeの機能を使う

Font Awesomeとは、ブログ上に“Webフォント”なるものを使えるようCSSを提供してくれるサービス。

使い方はこう。

<HEAD>~</HEAD>の内部に下を記述。

※読み込み速度も考慮し非同期読込にしたのが赤文字。不要なら削除して下さい。
<link async=”async” href=”https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=”stylesheet”></link>
うちのようにGoogleのBloggerの場合は少し書き方が異なり、
<link async=’async’ href=’https://use.fontawesome.com/releases/v5.0.6/css/all.css’ rel=’stylesheet’/>

上の準備をした上で、ページのHTMLに下のように書くと、

<i class=”fab fa-spin”>あいうえお</i>


あいうえお

次に、「あいうえお」の代わりにポク太郎の顔にすると、

<i class=”fab fa-spin”><img src=”「画像のURL」”></i>


ポックさん-できるかな

つまり、<i></i>タグにfabとfa-spinなるクラスを付ける(複数の場合は半角スペースで区切る)と、タグに挟まれた要素が回転します。

その要素にGIFアニメーションを指定することも可。ちゃんと動いたまま回転動作がプラスされます。

トイレ詰まりの業者要らずガボ(スッポン、キュポキュポとも言う)職人が説明する透過GIFの作り方【フリーソフト不要・無料作成サイト】

以上がFont Awesomeを使用した回転方法でした。

余談ですが、Font Awesomeでは多様なWebフォントがFont Awesomeのページで公開されています。

使い方は、使いたいWebフォントの「名称」を上記ページで調べ、

<i class=”fab fa-「名称」”></i>

とすることで表示できます。

例えば、こう書くとプレイステーション。

<i class=”fab fa-playstation fa-3x”></i>

「fa-3x」は3倍表示と言う意味。半角スペースで区切ります。

同様に「fa-spin」属性を追加することで回転できます。

<i class=”fab fa-playstation fa-spin fa-3x”></i>

方法2:CSS3を使う

方法1は外部のURLからCSSを読み込む方法。別に遅くはないのですが、ページの表示速度を気にする方は外部を参照するのを嫌うかも。

そこで、株式会社オンズのブログに投稿されたISSEIさんと言う方の方法を参考にします。

CSSにこう書きます。

.rotation {
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を書き換えて回転数を変えることも可能。

ポックさん-できるかな

使い分けできるよう理解しておくのが一番です。

コメント

タイトルとURLをコピーしました