読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

jQuery風にCSSアニメーションが実装できる「Velocity.js」を使ってみた

jQuery JavaScript CSS

どうも!chuckです

 

昨日参加したTriton.jsにて、Velocity.jsというプラグインが紹介されていました。

なかなか面白そうだったのでさっそく試してみました!

 

chuckwebtips.hatenablog.com

 

Velocity.jsって??

jQueryっぽくCSSアニメーションを書けるプラグインとのことです。

公式

julian.com

 

わかりやすいQiitaの記事

qiita.com

 

 

作ってみる

カンタンなDEMOを作りました!

①まずはお手本どおりに。クリックしたらズレます。

f:id:chuck0523:20150613123552p:plain

DEMO:http://chuck0523.github.io/velocityTrial/veloTrial1.html

 

②画像を回転させる

f:id:chuck0523:20150613123717p:plain

猫ちゃんをクリックするとぐるぐる回ります。

DEMO:http://chuck0523.github.io/velocityTrial/veloTrial2.html

 

複数要素を連動。クリックすると背景に隠れていた要素も回転します。

f:id:chuck0523:20150613123924p:plain

DEMO:http://chuck0523.github.io/velocityTrial/veloTrial3.html

 

④回転しつつ動く。③に加えて座標移動します。

f:id:chuck0523:20150613124046p:plain

DEMO:http://chuck0523.github.io/velocityTrial/veloTrial4.html

 

ホントにカンタンなものですが、以上となりますm(_ _)m

 

使ってみて

使いやすい!と感じました。まさにjQueryの記法そのもの。

けれど、一番大きな収穫はCSSアニメーションへの敷居が下がったことかも。CSSのアニメーションってずっと難しい印象があったんですが、このプラグインを通じて少しは仲良くなれた気がします(´;ω;`)

今回はカンタンなtranslateやrotateしか使いませんでしたが、これらを組み合わせたらもっとすごいモノが作れるんだろうなあと。ワクワクしています。

また、アニメーションする機会があればぜひ使いたいと思います!

 

ではヽ(=´▽`=)ノ

 

書いたコード(④のみ)

gist.github.com