よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements
Post on:2014年12月16日
ボタンがぷるるんと弾けたり、サイドバーがゴムのようにびよ~んとスライドしたり、フォームがぶるったりと、Webページのさまざまな要素に柔軟性を加え、操作が楽しくなる「Elastic SVG Elements」を紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121607.png)
デモではSVGを使ったさまざまなUIのインタラクションを楽しめます。
アニメーションのベースにはSnap.svgが使用されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121609.png)
デモのいくつかをGIFアニメーションにしてみました。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014121608-01.gif)
オフキャンバスのメニューがゴムのように弾かれて表示されます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014121608-02.gif)
ブラウザの下から表示されるプルアップメニューがぴんと弾けるように表示されます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014121608-03.gif)
ドロップダウンは折り畳みのアニメーションだけでなく横の伸縮が加わり、より楽しくスライドします。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014121608-04.gif)
フォームの各要素はフォーカスした際に、楽しいアニメーションで動きます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014121608-05.gif)
ボタン類にはさまざまなモーフィングが用意されており、膨らんだり凹んだりします。
sponsors