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