Webデザイン

リデザインのレビューを集めたWebサービス「reDSGN」

Webサイト・アプリ・企業ロゴからパッケージまでリデザインされた際のストーリーやレビューを集めたWebサービス「reDSGN」のご紹介。

jQueryプラグインをまとめた検索サイト「jQuery Cards」

Githubで公開されている1000個以上のjQueryプラグインをまとめた検索サイト「jQuery Cards」のご紹介。カテゴリー毎にまとめられた便利なサイトです。

CSSで指定できるカーソルをパッと確認できる「CSS Cursor」

カーソルの種類と対応ブラウザを確認することができるサイト「CSS Cursor」のご紹介。

様々なエフェクトを実装できるパーティクルエンジン「Proton」

パーティクルエフェクトを実装できるHTML5製のパーティクルエンジン「Proton」の紹介です。

リアルな水滴を表現できる「Rain & Water Effect Experiments」

codropsに公開されているWebGLを使って窓につたう雨(水滴)をリアルに表現した「Rain & Water Effect Experiments」の紹介です。

【jQuery】テキストカラーをシャッフルさせるjQueryプラグイン「JUMBLE」

指定したテキストのカラーをシャッフルさせることができるjQueryプラグイン「JUMBLE」の紹介です。ちょっとしたアクセントをつけたい時に効果的。

【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」

画像をハーフトーン(ドット)に変換してくれるjQueryプラグイン「Breathing Halftone」のご紹介。マウスオーバーでのエフェクトも秀逸です。

【jQuery】いろんなエフェクトの背景画像カルーセル「Crosscover」

様々なアニメーションエフェクトで背景画像を切り替えることができる「Crosscover」のご紹介。アニメーションはanimate.cssを使用。

【jQuery】Youtubeの動画サムネイルをアニメーション表示させる「PreViewTube.js」

Youtubeのサムネイルをアニメーション表示させることができるjQueryプラグイン「PreViewTube.js」のご紹介。複数のイメージで動画の内容を簡単に表示させることができるので便利。

【jQuery】エフェクトが魅力的なスライダー「jQuery Hero Slider Plugin」

ズームや、ローテーション(回転)エフェクトが魅力的なスライダーを実装することができるjQueryプラグイン「jQuery Hero Slider Plugin」のご紹介。

【JS】要素の切り替え時にアニメーションエフェクトを掛けられる「animateTransition.js」

ブロック要素の切り替え時や、ポップアップのアニメーションを手軽に実装することができるJS「animateTransition.js」の紹介です。

【JS】物理法則に基づいたアニメーションライブラリ「Dynamics.js」

重力や反動など物理法則に基づいたアニメーションを実装できる「Dynamics.js」のご紹介。シンプルなコードで実装できる便利なライブラリです。

【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」

スクロールに合わせて画像が3DのようにクロスフェードするjQueryプラグイン「tiltedpage_scroll.js」のご紹介。画像の多いサイトやランディングページなどで効果的かも。

レスポンシブデザインのパターン集「Responsive Patterns」

レスポンシブデザインの様々なパターンをストックしているサイト「Responsive Patterns」のご紹介。ちょっとした時にコピペで使用できるので便利。

【JS】要素をモーダルウィンドウに変化させる「cta.js」

要素をクリックすると、要素ごとモーダルウィンドウ・アラート・サイドメニューなどに変化させることができるJavaScriptライブラリ「cta.js」をご紹介。

RANDOM POST
  • Googleが公開した日本語ウェブフォント「Google Fonts + 日本語早期アクセス」
  • 陽炎のようなエフェクトを実装できる「Animated Heat Distortion Effects with WebGL」
  • 水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
  • デザイナーのポートフォリオをまとめたサイト「Bestfolios」
  • 簡単に作れるはめ込み画像モックアップジェネレーター5選
  • グラデーションのアニメーションを実装できる「Granim.js」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • Photoshopで簡単に背景を伸ばすテクニック
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
PICKUP
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • WordPressにおすすめレンタルサーバー8選【初心者向け】
  • 【無料・低価格】ロゴ作成に役立つロゴジェネレーター12選