Idea to Code

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

hawk

JavaScript

テキストカラースケールアニメーション化2015/06/24

テキストの色をカラースケールで動的に変化させてみた。


dynamic-colorscale.jsを読み込むとdynamic-colorscaleクラスの付いた要素をspan要素で分割し、

各span要素のテキストの色を一定時間ごとに変化させる。


色相の増減にはcos関数を利用。

dynamic-colorscale.js 
$(function(){
  $(".dynamic-colorscale").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-colorscale").each(              // dynamic-grayscale-3要素ごとに
      function(){
        $(this).find("span").each(              // span要素ごとに
          function(i){
            var hue = Math.floor((Math.cos((i*5+angle)*cvt)+1)*180); // 輝度を作成
            $(this).css("color","hsl(" + hue + ",80%, 50%)");  // 色を設定
          }
        );
      }
    );
    angle += angle < 0 ? 360 : -20;          // 角度を更新
  }, 100);                                  // 0.1秒毎に実行
});