Idea to Code

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

hawk

JavaScript

テキストグレースケールアニメーション化　その42015/07/02

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


半角文字と全角文字で変化の速度が変わらないように修正。

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


dynamic-grayscale-4.jsを読み込むと、

dynamic-grayscale-4クラスの付いたタグ要素のテキストの色を一定時間ごとに変化させる。


輝度の増減には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-grayscale-4.js 
$(function(){
  var target = ".dynamic-grayscale-4";        // ターゲットを設定
  $(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 lightness = Math.floor((Math.cos((cnt*9+angle)*cvt)+1)*50); // 輝度を作成
            $(this).css("color","hsl(0,0%," + lightness + "%)");  // 色を更新
            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;
}