最近のWebサイトで見かける便利な機能や仕掛け、気持ちいいアニメーションを実装するCSSやスクリプトのまとめ
Post on:2016年5月17日
sponsors
最近の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
