テキストグレーケールアニメーション化-Idea to Code-

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

JavaScript

テキストグレースケールアニメーション化2015/06/22

テキストの色をグレースケールのアニメーションで変化させてみた。

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

$(function(){
  var lightness = 0;                    // 輝度を初期化
  var v = 1;                            // 変化方向を初期化
  (function(){
    if(lightness < 0 || 100 < lightness)// 輝度が範囲外なら
      v *= -1;                          // 方向を逆に
    lightness += 10 * v;                // 輝度を更新
    $(".dynamic-grayscale").css("color","hsl(0,0%," + lightness + "%)");  // 輝度を設定
    setTimeout(arguments.callee, 100);  // 0.1秒後にもう一度実行
  })();
});