どうも!chuckです
昨日参加したTriton.jsにて、Velocity.jsというプラグインが紹介されていました。
なかなか面白そうだったのでさっそく試してみました!
Velocity.jsって??
jQueryっぽくCSSアニメーションを書けるプラグインとのことです。
公式
わかりやすいQiitaの記事
作ってみる
カンタンなDEMOを作りました!
①まずはお手本どおりに。クリックしたらズレます。
DEMO:http://chuck0523.github.io/velocityTrial/veloTrial1.html
②画像を回転させる
猫ちゃんをクリックするとぐるぐる回ります。
DEMO:http://chuck0523.github.io/velocityTrial/veloTrial2.html
③複数要素を連動。クリックすると背景に隠れていた要素も回転します。
DEMO:http://chuck0523.github.io/velocityTrial/veloTrial3.html
④回転しつつ動く。③に加えて座標移動します。
DEMO:http://chuck0523.github.io/velocityTrial/veloTrial4.html
ホントにカンタンなものですが、以上となりますm(_ _)m
使ってみて
使いやすい!と感じました。まさにjQueryの記法そのもの。
けれど、一番大きな収穫はCSSアニメーションへの敷居が下がったことかも。CSSのアニメーションってずっと難しい印象があったんですが、このプラグインを通じて少しは仲良くなれた気がします(´;ω;`)
今回はカンタンなtranslateやrotateしか使いませんでしたが、これらを組み合わせたらもっとすごいモノが作れるんだろうなあと。ワクワクしています。
また、アニメーションする機会があればぜひ使いたいと思います!
ではヽ(=´▽`=)ノ
書いたコード(④のみ)