最近のWebサイトで見かける便利な機能や仕掛け、気持ちいいアニメーションを実装するCSSやスクリプトのまとめ

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

最近のWebサイトで見かける便利な機能や仕掛けを実装するCSSやスクリプトのまとめ

イラスト: Girls Design Materials

デモのキャプチャ

Wait! Animate

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

デモのキャプチャ

Distorted Button Effects
デモページ

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

デモのキャプチャ

Animated Transition Effects
デモページ

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

デモのキャプチャ

Sliding Panels Template
デモページ

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

デモのキャプチャ

Project Cards Template
デモページ

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

デモのキャプチャ

Awesome Input Focus Effects
デモページ

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

デモのキャプチャ

Star Wars Intro
デモページ

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

デモのキャプチャ

type.js

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

デモのキャプチャ

atrament.js
デモページ

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

デモのキャプチャ

Background Blur
デモページ

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

デモのキャプチャ

Material Motion

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

top of page

©2017 coliss