JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptとFont Awesomeアイコンでアニメーション効果を作成する方法

Webページに動きを加えることで、訪問者の視線を引きつけ、UIに彩りを添えることができます。Font Awesomeのようなアイコンフォントと、JavaScriptのタイマー関数である setTimeout() や setInterval() を組み合わせれば、外部ライブラリに頼ることなく、手軽にアイコンのアニメーション効果を実現できます。

仕組みはとてもシンプルです。一定時間ごとにアイコンのUnicode文字を入れ替えることで、アイコンが次々と切り替わって動いているように見せます。

実装のポイント

  • Font AwesomeのCSSファイルをCDNから読み込む
  • アイコンを表示する要素に「fa」クラスを指定する
  • setTimeout()でアイコンを順番に切り替え、setInterval()で一連の処理を繰り返し実行する

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    #user {
        font-size: 60px;
        color: rgb(106, 33, 201);
    }
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>アニメーションするアイコンの例</h1>
<div id="user" class="fa"></div>
<script>
    function userShift() {
        var userEle = document.getElementById("user");
        // 最初のアイコンを表示
        userEle.innerHTML = "&#xf2bd;";
        // 1秒後に別のアイコンへ切り替え
        setTimeout(function() {
            userEle.innerHTML = "&#xf007;";
        }, 1000);
        // 2秒後にさらに別のアイコンへ切り替え
        setTimeout(function() {
            userEle.innerHTML = "&#xf234;";
        }, 2000);
    }
    userShift();
    setInterval(userShift, 4000);
</script>
</body>
</html>

コードの解説

  1. アイコンフォントの読み込み： cdnjsのCDN経由でFont Awesome 4.7.0のCSSを読み込みます。これにより「fa」クラスを持つ要素でアイコンを表示できるようになります。
  2. スタイル定義： id属性が「user」の要素に対して、フォントサイズ60px、紫色（rgb(106, 33, 201)）を指定し、大きく目立つアイコンを表示します。
  3. userShift()関数： getElementById()で対象要素を取得し、innerHTMLにFont AwesomeのUnicode文字を設定してアイコンを描画します。その後、setTimeout()によって1秒後・2秒後にそれぞれ異なるアイコンへ切り替えます。
  4. 繰り返し処理： ページ読み込み時に一度userShift()を実行した後、setInterval()により4秒ごとに同じアニメーションが繰り返されるため、アイコンが永続的にアニメーションし続けます。

実行結果

このコードをブラウザで開くと、画面上部に見出しが表示され、その下に大きな紫色のユーザーアイコンが現れます。アイコンは1秒ごとに別のデザインへと切り替わり、4秒周期でこの切り替えアニメーションが繰り返されます。setTimeout()やsetInterval()の引数のミリ秒値を変更すれば、アニメーションのスピードやテンポも自由に調整できます。

  1. JavaScriptでタイピング効果（タイプライターエフェクト）を作成する方法を解説

    Webサイトに動きを加える演出のひとつとして人気が高いのが、文字が一文字ずつ打ち込まれていくような「タイピング効果（タイプライターエフェクト）」です。JavaScriptでは、setTimeout() を使った再帰処理と charAt() メソッドを組み合わせることで、この効果をシンプルに実装できます。以下に、ボタンをクリックするとテキストが一文字ずつ表示されるサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <head> <style> body{ font-family: Sego

  2. JavaScriptとFont Awesomeアイコンでアニメーション効果を作成する方法

    Webページに動きを加えることで、訪問者の視線を引きつけ、UIに彩りを添えることができます。Font Awesomeのようなアイコンフォントと、JavaScriptのタイマー関数である setTimeout() や setInterval() を組み合わせれば、外部ライブラリに頼ることなく、手軽にアイコンのアニメーション効果を実現できます。 仕組みはとてもシンプルです。一定時間ごとにアイコンのUnicode文字を入れ替えることで、アイコンが次々と切り替わって動いているように見せます。 実装のポイント Font AwesomeのCSSファイルをCDNから読み込む アイコンを表示する要素に「fa