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

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

サイトのキャプチャ

Elastic SVG Elements

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

サイトのキャプチャ

デモページ

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

デモのアニメーション

Sidebar

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

デモのアニメーション

Pullup Menu

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

デモのアニメーション

Dropdown

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

デモのアニメーション

Input

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

デモのアニメーション

Button

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

top of page

©2017 coliss