すぐに使える!アニメーションを使ったUIエレメントのスニペットのまとめ -Kickdrop

そのまますぐに使えて、デザインも素敵! アニメーションを使ったさまざまなUIエレメントのスニペットを配布しているKickdropを紹介します。

サイトのキャプチャ

Kickdrop

Kickdropは、3人のフロントエンドのデザイナーとプログラマーがそれぞれGitHubやDribbbleなどでリリースしたものをまとめたもので、下の一覧をぱっと見ただけでも面白そうなUIエレメントが揃ってますよね。

サイトのキャプチャ

all drops

各エレメントには、デモやダウンロードだけでなく、実装方法や対応ブラウザなどの補足情報も掲載されています。

サイトのキャプチャ

対応ブラウザも明記

Kickdropで配布されているスニペットの中からいくつか紹介します。

サイトのキャプチャ

Fullpage Portfolio Template
デモページ

ポートフォリオなどにぴったりな縦長ページ用のテンプレート、ナビゲーションや水平スライダー、エレメントのアニメーション表示も備えています。

サイトのキャプチャ

Masonry Content Feed
デモページ

レンガ状に積み重ねたMasonryレイアウトで、表示される時のアニメーションがぽわんといい感じです。

サイトのキャプチャ

Expanding Content Overlay
デモページ

マトリックス状に配置した各パネルをアニメーションで拡大して、コンテンツをオーバーレイで表示します。

サイトのキャプチャ

on scroll animated header
デモページ

下にスクロールすると、配置がアニメーションで変わるヘッダ。

サイトのキャプチャ

Animated Icons
デモページ

アニメーションで動くアイコン、矢が的に当たったり、ランプが光ったり、吹き出しが表示されたり、などイラストにあった動きをします。

サイトのキャプチャ

Social Share Buttons
デモページ

中心のボタンからソーシャルボタンがサークル状に表示されるほか、パタパタ折り畳んで表示されたり、縦一列にひょいひょいとでてきたり、弾むようにでてきたり、とさまざまなアニメーションが用意されています。

サイトのキャプチャ

Preloaders
デモページ

7種類のプリローダーのアニメーションで、7つともちょっと他では見ない美しいエフェクトを備えています。

サイトのキャプチャ

Pricing Tables
デモページ

レスポンシブ対応の価格表、アニメーションはありませんが、こういったUIエレメントはさまざまなシーンで利用できますね。

サイトのキャプチャ

Task List
デモページ

タスクリストのコンテンツ、チェックボックスをチェックするとアニメーションで打ち消し線が描かれます。

サイトのキャプチャ

Input Masks
デモページ

入力支援のアニメーション、キャプチャだと分かりにくいかもしれませんが、年月日は一文字ずつハイライトがずれていくのいいですね。

サイトのキャプチャ

Animated Form Validation
デモページ

アニメーションを使ったフォームのバリデーション。間違えるとイヤイヤってアニメーションするのがかわいいです。

サイトのキャプチャ

Timeline
デモページ

タイムラインコンテンツで、スクロールすると時間軸に各コンテンツがふわりとアニメーションで近づきます。

sponsors

top of page

©2018 coliss