Idea to Code

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

hawk

JavaScript

テキスト動的グレースケール化2015/06/23

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


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


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

dynamic-grayscale-2.js 
$(function(){
  // 初期化
  var dgss = $(".dynamic-grayscale-2");       // dynamic-grayscale-2クラスの要素を取得
  var spans = [];                              // span要素群を初期化
  for (var i = 0; i < dgss.length; i++) {     // dynamic-grayscale-2クラスの要素ごとに
    var str = $(dgss[i]).text();               // テキストを取得
    $(dgss[i]).text("");                       // テキストを削除
    spans[i] = [];                            // span要素群を作成
    for (var j = 0; j < str.length; j++) {     // テキストを1文字ずつ
      var span = $("<span>");                 // span要素を作成
      span.text(str[j]);                       // テキストを設定
      $(dgss[i]).append(span);                // span要素を追加
      spans[i][j] = span;                      // spansに格納
    }
  }
  
  var cvt = Math.PI/180;                      // ラジアン変換器
  var angle = 180;                            // 角度を初期化
  // 以下を0.1秒ごとに実行
  (function(){
    for(var i=0; i<spans.length; i++){        // dynamic-grayscale-2クラスの要素ごとに
      for(var j=0; j<spans[i].length; j++){    // span要素ごとに
        var lightness = Math.floor((Math.cos((j*9+angle)*cvt)+1)*50); // 輝度を作成
        $(spans[i][j]).css("color","hsl(0,0%," + lightness + "%)");  // 色を更新
      }
    }
    angle += angle < 0 ? 360 : -20;            // 角度を更新
    setTimeout(arguments.callee, 100);        // 0.1秒ごとに実行
  })();
});