CSSでクールなグリッチエフェクトを実装できる「CSS Glitch Effect」
画像にバグったようなノイズを走らせるグリッチエフェクトを表現できる「CSS Glitch Effect」を紹介します。
Webデザイン
CSSでインスタグラムのようなフィルターを再現できる「Instagram.css」
任意の画像にクラスを指定するだけでInstagramのフィルターのような効果を画像に付与できるCSSライブラリ「Instagram.css」の紹介です。
CSSで簡単に作れるおしゃれな見出しデザイン20選
HTMLとCSSのみで簡単に作れる見出しデザイン例です。シンプルな見出しから凝った見出しまでサンプル20例を紹介します。
ビューポートなどで要素の可視性を検出できる「Emergence.js」
ビューポートまたは指定したエリアでの要素の可視化を検出することができる「Emergence.js」の紹介です。
anime.jsを使用したテキストエフェクト集「Moving Letters」
anime.jsを使用した心地よいアニメーションのテキストエフェクトを公開してるサイト「Moving Letters」の紹介です。
シンプルなチャートを実装できるライブラリ「Frappé Charts」
棒グラフや折れ線グラフなどシンプルでモダンなチャートを実装することができるチャートライブラリ「Frappé Charts」の紹介です。
水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
水面や水中の歪みのエフェクトとアニメーションが秀逸な「Liquid Distortion Effects」のチュートリアルの紹介です。
動きのあるバブルを背景に設定することができる「bubbly-bg」
ランダムに動きのあるバブルを背景に設定することができる軽量で使いやすいスクリプト「bubbly-bg」の紹介です。
【jQuery】レスポンシブ対応のタブを実装できる「GridTab」
レスポンシブに対応した様々なタブを実装することができるjQueryプラグイン「GridTab」の紹介です。様々なスタイルが用意されておりカスタマイズも可能です。
YoutubeやGoogleMapをレスポンシブ化するジェネレーター「Embed Responsively」
YoutubeやGoogleMapなどの埋め込みコードをレスポンシブに変換してくれるジェネレーター「Embed Responsively」を紹介します。
10年前の有名サイトを振り返ることができる「Ten Years Ago」
AppleやAmazon、Youtubeなど海外の有名なサイトの10年前のデザインを振り返ることができる「Ten Years Ago」の紹介です。
メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
メニューテキストのホバーエフェクトをアイデアをしてまとめた記事「Inspiration for Menu Hover Effects」の紹介です。
さまざまなスタイルのCSSボタンをコレクションした「Buttons」
比較的ベーシックなスタイルのCSSボタンを大量にコレクションした「Buttons」の紹介です。
パララックス効果がキレイなスライダー「PIGNOSE ParallaxSlider」
サイトのメインヴィジュアルに使えそうなパララックス効果のオシャレなスライダー「PIGNOSE ParallaxSlider」の紹介です。
アニメーションアイコンのライブラリ「60 Free Animated Icons」
SVGアイコンとjsライブラリ(titanic.js)がセットになった、簡単に実装できるアニメーションアイコン「60 Free Animated Icons」の紹介です。
Google Mapのスタイルテンプレート「Snazzy Maps」
WebサイトにGoogle Mapを埋め込む時に便利なGoogle Mapのスタイルテンプレート集「Snazzy Maps」の紹介です。
ギザギザボーダーを作れるジェネレーター「CSS Jagged Border Generator」
ギザギザボーダーをCSSのみで簡単に生成することができるジェネレーター「CSS Jagged Border Generator」の紹介です。
【jQuery】Youtubeがウィンドウ内に表示されたタイミングで再生させるプラグイン
サイト内でスクロールして表示領域にYoutubeが表示された時に再生、非表示になった時に停止させることができるjQueryプラグイン「jquery.youtube-inview-autoplay.js」の紹介です。
