ちょっとした動きを加えるとUIは魅力的になる!新感覚のアニメーションが気持ちいいUIデザインのまとめ

次のプロジェクトのヒントに、クリエイティブな刺激になる新感覚の動きが面白いCSSアニメーションを使ったUIデザインを紹介します。
ちょっとした動きが加わることで、UIは魅力的になりますね。

デモのアニメーション

Sticky Elements
Sticky Elements -GitHub

指定した範囲のみ、カーソルにひっつくアニメーション。
水平のみ・垂直のみもでき、後ろ髪を引かれるようなエフェクトにも利用できます。

A new mobile navigation menu

PlayStationのデザイナー: Joey Rabbitt氏による、PlayStation.comのモバイル版のメニューのFB。こうして公開することで、さまざまなユーザーの意見を参考にできるのは良い試みですね。

デモのアニメーション

Material Radio Button

Material Designを採用したラジオボタン。
ぽにょんと移動するの、かわいい!

デモのアニメーション

Spring popup card

こちらもMaterial Designで、カードのアニメーション。
アローの左右で、アニメーションの方向も変わります。

サイトのキャプチャ

3D Parallax Buttons

これはアニメーションGIFにするのが難しかったので、静止画で。
スクロールすると、ボタンの3Dが変化します。

デモのアニメーション

Elastic pull to refresh

リフレッシュのかわいいアニメーション。
エラスティックは、今年多くのUIで見かけると思います。

デモのアニメーション

Jumpy Hearts

最後は、かわいいアニメーション。
アクションした後に、こういう演出があると嬉しいですね。

top of page

©2016 coliss