よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements

Post on:2014年12月16日

sponsors

ボタンがぷるるんと弾けたり、サイドバーがゴムのようにびよ～んとスライドしたり、フォームがぶるったりと、Webページのさまざまな要素に柔軟性を加え、操作が楽しくなる「Elastic SVG Elements」を紹介します。

デモではSVGを使ったさまざまなUIのインタラクションを楽しめます。
アニメーションのベースにはSnap.svgが使用されています。

デモのいくつかをGIFアニメーションにしてみました。

オフキャンバスのメニューがゴムのように弾かれて表示されます。

ブラウザの下から表示されるプルアップメニューがぴんと弾けるように表示されます。

ドロップダウンは折り畳みのアニメーションだけでなく横の伸縮が加わり、より楽しくスライドします。

フォームの各要素はフォーカスした際に、楽しいアニメーションで動きます。

ボタン類にはさまざまなモーフィングが用意されており、膨らんだり凹んだりします。