最近のWebサイトで見かける便利な機能や仕掛け、気持ちいいアニメーションを実装するCSSやスクリプトのまとめ
Post on:2016年5月17日
最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。

イラスト: Girls Design Materials

JavaScriptは無し、キーフレームを使った複雑なCSSアニメーションをオンラインで簡単に作成できます。

Distorted Button Effects
デモページ
今までにはない新鮮な動きのアニメーションをSVGフィルタを使って実装します。

Animated Transition Effects
デモページ
これも今までにないアニメーションです。
さまざまなCSSアニメーションで、全面にモーダルコンテンツを表示します。

垂直に区切られた縦長のパネルを使って、ダイナミックなアニメーションでコンテンツを表示します。

こちらは水平に区切られたタイプ。

Awesome Input Focus Effects
デモページ
入力時のフォーカスのエフェクト。ボーダーやボックス、ラベルなどがアニメーションで変化します。

スターウォーズのイントロのように文字がアニメーションで表示されます。divに配置しているだけなので文字だけでなく、画像など他の要素でも自由に配置できます。

Webのタイポグラフィをかなり細かく制御できるスクリプト。
キャプチャはカーニングで、「az」は0.02em、「zy」は0.01emのように個別に設定することも可能です。

HTML5 Canvasを使って、自由にお絵描きすることができる軽量のライブラリ。

コンテンツの背景で人気の高いぼかし効果・ブラーエフェクトをスクリプトで実装します。ぼけの調整や不透明度などを細かく設定でき、画像アプリでやるのと違い、アニメーションにも対応しています。

Material Designの楽しくて美しいアニメーションをMaterial Motionが公開されました。UIアニメーションの良い例・悪い例もあり、楽しむだけでなく、勉強にもなるコンテンツです。
sponsors