文字をtext-shadowでChoo Choo Train風にする、アホなjQueryプラグインを作った

タイトル通りのアホなjQueryプラグイン作ってみた。
指定したテキストに対して、text-shadowを生成してChoo Choo Train風にしてくれる感じ。
つらつら書くよりかは使い方書いた方が早いので書いてみる。

ダウンロードはこちらから

<script src="choochootrain.js" type="text/javascript"></script>

$(document).ready(function(e){
  $(".hoge").choochootrain();
});

<p class="hoge">ここに文字を入力</p>

これだけで上の画像のようになる。
で、細かいオプションとかは下記になる。

$(document).ready(function(e){
  $(".hoge").choochootrain({
    colors:"random",//random or Array(["red","#0f0",...])
    distance:"1em",//radius of turn
    delay:500,//start timing
    interval:"auto",//generate elements interval.interval is 'auto' or int.
    num:5,//number of shadows
    original:false,//leave the original element
    blur:true,//if use blur,use settings.release value
    release:0.1,//distance between the elements
    speed:1000,//time to go around
  });
});

■colors

colorsは"random"を指定すればrandomな色が出る。
numと連携して指定した数だけランダムな色が出る。
もしランダムな色が嫌ならば配列で["#f00","#0f0"]みたいに指定してあげればOK。
※ただし配列で指定した場合はnumと数が合わなければエラーを出す

■distance

回転する半径をここで指定。
1pxや1emなどといった感じ。
※ただし単位はしっかりと指定しなければいけない

■delay

DOMの読み込みが完了してからどれくらいで実行するかどうか。
遅らせる必要がなければ0にすればいい。

■interval

shadowを生成するタイミング。
Choo Choo Train風にするためにはタイミングをずらす必要があるので。
"auto"を指定すると自動で生成してくれるが1周する間に全部出してしまうので、
それが嫌ならば自分でタイミングを指定するとよいかも。

■num

shadowを生成する数。

■original

元のテキストは動かないので、元のテキストを消すかどうか。
もし消さないのであればtrueを入れることによって元のテキストは保持される。

■blur

ぼかしを入れるかどうか。
ぼかしの値はreleaseの値に0.1をかけたものになるので、後ろになればなるほど文字はぼけるようになる。
もしぼかしたくないならば、falseを入れればよい。

■release

回転半径を後ろの方では広げるかどうか。
Choo Choo Trainでは前の方の回転半径は小さく、後ろにいけばいくほど回転半径は大きくなる。
もし一定の半径にしたいのであれば0を入れればよい。

■speed

1つの要素が一周するのにかかる時間。

ということでこんな意味の無いプラグイン作ってみたけど、よかったら誰か使ってくださいみたいな。