テキストカラーケール化-Idea to Code-

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

JavaScript

テキストカラースケール化2015/06/21

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

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

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

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