サインポール風アニメーションjQueryプラグイン

首相が通ってる美容室の発言に端を発してQBハウスの社長が規制改革に動いてるらしい散髪屋さんですが昔から赤・白・青のサインポールが定番になっています。
デザインの梅干によるとトリコロールのサインポールは日本だけで無く世界的に使われてるようです。

そこでサインポールの動きをCSSのグラデーションとトランスレーションで再現してみました。
4本のサインポールの動きサンプル

仕組みは正方形のオブジェクトを入れ、それにCSSのlinear-gradientで斜めのストライプを作って、それをtransformでアニメーションしています。

今回はjQueryプラグイン化し、久々にGithubにアップしました。
uda2/barbersignpole
グラデーションの模様は好きなデザインに指定できます。値は色とパーセントです。
方向はvectに数値を入力することで設定します。テンキーを基準に7が左上、9が右上、3が右下、1が左下になります。
speedは一連のアニメーションの時間（秒）です。

まず、グラデーションですが普通に色を並べるとストライプにならないので色を指定すると次の色を0.005％後に指定する事でグラデーションを抑止しストライプにしています。
アニメーションはCSSのグラデーションは背景画像なのでシンプルに背景画像位置（background-position）をいじっても再現できるのですが重いので、正方形のオブジェクトを追加してそれをtransformで移動しています。
一見冗長に見えますがタスクマネージャー読みで3倍ぐらい高速になります。

※現時点のGoogleChromeは斜めのグラデーションが汚く細かい線が再現されないです。

Tags: css3, jQuery プラグイン, transform