Idea to Code

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

hawk

JavaScript

テキストグレースケールアニメーション化　その32015/06/23

テキストの色をグレースケールで動的に変化させてみたの改良版


配列を使わずに実装してみた。


dynamic-grayscale-3.jsを読み込むと、dynamic-grayscale-3クラスの付いたタグ要素のテキストの色を一定時間ごとに変化させる。


輝度の増減にはcos関数を利用。

dynamic-grayscale-3.js 
$(function(){
  $(".dynamic-grayscale-3").each(              // dynamic-grayscale-3要素ごとに
    function(){
      var text = $(this).text();              // テキストを取得
      $(this).text("");                        // テキストを空に
      for(var i=0; i<text.length; i++){        // テキストの長さだけ繰り返す
        var span = $("<span>");                // span要素生成
        span.text(text[i]);                    // 文字を設定
        $(this).append(span);                  // span要素を追加
      }
    }
  );
  
  var cvt = Math.PI/180;                      // ラジアン変換器
  var angle = 180;                            // 角度を初期化
  
  setInterval(function(){
    $(".dynamic-grayscale-3").each(              // dynamic-grayscale-3要素ごとに
      function(){
        $(this).find("span").each(              // span要素ごとに
          function(i){
            var lightness = Math.floor((Math.cos((i*9+angle)*cvt)+1)*50); // 輝度を作成
            $(this).css("color","hsl(0,0%," + lightness + "%)");  // 色を更新
          }
        );
      }
    );
    angle += angle < 0 ? 360 : -20;          // 角度を更新
  }, 100);                                  // 0.1秒毎に実行
});