Idea to Code

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

hawk

JavaScript

テキストカラースケールアニメーション化　その２2015/07/03

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


半角と全角での速度の差がなくなるように修正。

判定にはこちらのスクリプトisHan2.jsを使用。


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

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


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


aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱ

あああああああああああああああああああああああああああああああああああああああああああああああああああああ

あｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあｱaあ

dynamic-colorscale-2.js 
$(function(){
  var target = ".dynamic-colorscale-2";        // ターゲットを設定
  $(target).each(                              // ターゲットごとに
    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(){
    $(target).each(                            // ターゲットごとに
      function(){
        var cnt = 0;                          // カウントを初期化
        $(this).find("span").each(            // span要素ごとに
          function(i){
            var hue = Math.floor((Math.cos((cnt*5+angle)*cvt)+1)*180); // 輝度を作成
            $(this).css("color","hsl(" + hue + ",80%, 50%)");  // 色を設定
            cnt += isHan($(this).text())?0.5:1;  // 半角なら0.5、全角なら1をカウント
          }
        );
      }
    );
    angle += angle < 0 ? 360 : -20;          // 角度を更新
  }, 100);                                  // 0.1秒毎に実行
});
isHan2.js 
function isHan(c){
  var code = c.charCodeAt(0);
  var f;
  
  f  = (code >= 0x0 && code < 0x81);
  f |= (code == 0xf8f0);
  f |= (code >= 0xff61 && code < 0xffa0);
  f |= (code >= 0xf8f1 && code < 0xf8f4);
  
  return !!f;
}