Tagged ‘jQuery プラグイン’

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

バーバーサインポールの動きを再現する jQuery プラグイン

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

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

揺れるキリン

kirin朝のまどろみは時々アイデアが降りてくる。
大抵は意味不明で使えないアイデアで、今回も揺れるキリンのイメージが浮かんだので作ってみた。

手法はFlashではよく使われてるもので画像を1ピクセル毎にスライスしたものを用意して動かすのだけど最近はFlash使って無いのでjQueryで作ることにした。

手順は下記の様な感じ
・画像を読むのを待つ。
・ul&liのリストで縦ピクセル分にスライスする。
・スライスした画像を背景にして背景の位置を動かす。

やってみるとfirefoxではスローモーションになってるので背景の位置を変えず余白を変更する事で動かしてみたが解決しなかった。firefoxは苦手なのかもしれない。
kirin wave
※キリンの絵をクリックするとアニメーションが始まり、もう一回クリックすると止まります。

全く無意味だけどjQueryプラグイン化してみた。

更に世界一簡単なGithub入門を見ながら作ったライブラリをGithubで公開してみた。(Gitすら分ってないので怪しいですが)
https://github.com/uda2/kirinwave

最終的に一番時間が掛かったのはキリンの絵を描く行程でした。