最近のWebサイトで見かける便利な機能や仕掛け、気持ちいいアニメーションを実装するCSSやスクリプトのまとめ
Post on:2016年5月17日
最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。
![最近のWebサイトで見かける便利な機能や仕掛けを実装するCSSやスクリプトのまとめ](http://coliss.com/wp-content/uploads-201602/2016051701.png)
イラスト: Girls Design Materials
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051702-01.png)
JavaScriptは無し、キーフレームを使った複雑なCSSアニメーションをオンラインで簡単に作成できます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051703-02.gif)
Distorted Button Effects
デモページ
今までにはない新鮮な動きのアニメーションをSVGフィルタを使って実装します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051703-03.gif)
Animated Transition Effects
デモページ
これも今までにないアニメーションです。
さまざまなCSSアニメーションで、全面にモーダルコンテンツを表示します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051703-04.gif)
垂直に区切られた縦長のパネルを使って、ダイナミックなアニメーションでコンテンツを表示します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051702-05.png)
こちらは水平に区切られたタイプ。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051702-06.png)
Awesome Input Focus Effects
デモページ
入力時のフォーカスのエフェクト。ボーダーやボックス、ラベルなどがアニメーションで変化します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051702-07.png)
スターウォーズのイントロのように文字がアニメーションで表示されます。divに配置しているだけなので文字だけでなく、画像など他の要素でも自由に配置できます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051702-08.png)
Webのタイポグラフィをかなり細かく制御できるスクリプト。
キャプチャはカーニングで、「az」は0.02em、「zy」は0.01emのように個別に設定することも可能です。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051702-09.png)
HTML5 Canvasを使って、自由にお絵描きすることができる軽量のライブラリ。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051702-10.png)
コンテンツの背景で人気の高いぼかし効果・ブラーエフェクトをスクリプトで実装します。ぼけの調整や不透明度などを細かく設定でき、画像アプリでやるのと違い、アニメーションにも対応しています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051702-11.png)
Material Designの楽しくて美しいアニメーションをMaterial Motionが公開されました。UIアニメーションの良い例・悪い例もあり、楽しむだけでなく、勉強にもなるコンテンツです。
sponsors