テキストグレースケール化-Idea to Code-

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

JavaScript

テキストグレースケール化2015/06/20

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

grayscale.jsを読み込むと、grayscaleクラスの付いたタグ要素のテキストをspan要素で分割し、

それぞれの色を段階的に変化させる。

$(function(){
  $(".grayscale").each(            // grayscaleクラスの要素ごとに
    function(){
      var text = $(this).text();  // テキスト取得
      $(this).text("");            // テキストを空に
      
      for(var j=0; j<text.length; j++){      // 1文字ずつ実行
        var lightness = Math.floor(j * 90/text.length);  // 輝度を作成
        var span = $("<span>");              // span要素を作成
        span.css("color","hsl(0,0%," + lightness + "%)");  // 色を設定
        span.text(text[j]);                  // 文字を設定
        $(this).append(span);      // span要素を追加
      }
    }
  );
});