すぐに使える！アニメーションを使ったUIエレメントのスニペットのまとめ -Kickdrop
Post on:2014年6月30日
sponsors
そのまますぐに使えて、デザインも素敵！ アニメーションを使ったさまざまなUIエレメントのスニペットを配布しているKickdropを紹介します。
Kickdropは、3人のフロントエンドのデザイナーとプログラマーがそれぞれGitHubやDribbbleなどでリリースしたものをまとめたもので、下の一覧をぱっと見ただけでも面白そうなUIエレメントが揃ってますよね。
各エレメントには、デモやダウンロードだけでなく、実装方法や対応ブラウザなどの補足情報も掲載されています。
対応ブラウザも明記
Kickdropで配布されているスニペットの中からいくつか紹介します。
Fullpage Portfolio Template
デモページ
ポートフォリオなどにぴったりな縦長ページ用のテンプレート、ナビゲーションや水平スライダー、エレメントのアニメーション表示も備えています。
レンガ状に積み重ねたMasonryレイアウトで、表示される時のアニメーションがぽわんといい感じです。
Expanding Content Overlay
デモページ
マトリックス状に配置した各パネルをアニメーションで拡大して、コンテンツをオーバーレイで表示します。
on scroll animated header
デモページ
下にスクロールすると、配置がアニメーションで変わるヘッダ。
アニメーションで動くアイコン、矢が的に当たったり、ランプが光ったり、吹き出しが表示されたり、などイラストにあった動きをします。
中心のボタンからソーシャルボタンがサークル状に表示されるほか、パタパタ折り畳んで表示されたり、縦一列にひょいひょいとでてきたり、弾むようにでてきたり、とさまざまなアニメーションが用意されています。
7種類のプリローダーのアニメーションで、7つともちょっと他では見ない美しいエフェクトを備えています。
レスポンシブ対応の価格表、アニメーションはありませんが、こういったUIエレメントはさまざまなシーンで利用できますね。
タスクリストのコンテンツ、チェックボックスをチェックするとアニメーションで打ち消し線が描かれます。
入力支援のアニメーション、キャプチャだと分かりにくいかもしれませんが、年月日は一文字ずつハイライトがずれていくのいいですね。
Animated Form Validation
デモページ
アニメーションを使ったフォームのバリデーション。間違えるとイヤイヤってアニメーションするのがかわいいです。
タイムラインコンテンツで、スクロールすると時間軸に各コンテンツがふわりとアニメーションで近づきます。
sponsors
