Creative Audio Visualizers | Codrops クリエイティブなオーディオビジュアライザー実装デモ 音楽にあわせてグリグリ動くビジュアルエフェクトの実装がすごい 関連エントリ SVGとanime.jsを使った機敏に動くツールチップ実装「Playful Little Tooltip Ideas」

Jquery-backdetect by ianrogren ブラウザの戻るボタンクリックを検出して処理を書けるようにする「Jquery-backdetect」 ブラウザの戻るボタンが押された際に何かしらのアクションを促したり、Analytics等でイベントトラッキングしたりといった事に使えそうです 関連エントリ 美しいUIの月間イベントカレンダー実装jQueryプラグイン「Monthly.js」 時系列のイベント表示に使えるUI「EventControl」

Colorify.js 画像の特徴色をJSで抽出できる「Colorify.js」。 画像の特徴色が分かれば、背景と調和させたり、デザインの幅が広がりますが、サーバ側でやると重そう、ということでJSで実施できるライブラリです。 画像の枠線の色を決める場合にも使えて実装すると次のように、違和感無く枠線を設定できます グラデーションの枠線なかも次のように自然にキマリます 関連エントリ ２つの色をブレンドすることが出来るJS「colorblendjs」 色の生成をWEB上でサクッと行える「fifty-shades」 テキストを独特の虹色アニメーションさせられる「Rainbow.js」 Tシャツなどの製品をWEB上で色のカスタマイズができるようにするjQueryプラグイン「Product Colorizer」

FontBase ? a blazing fast, beautiful and free font manager for Windows. デザイナー必携。フォント管理時に役立つ、最新のフォント管理ツール「FontBase」 UIがモダンなフォント管理ツールがダウンロードして利用できます。 好きな文字を打てば、入っているフォントでリストでプレビューされ、フォントのサイズ(px, em)指定、FG,BG色設定、お気に入りに追加したり出来て、デザイナーの方は入れない理由がないソフトウェアに思えます。 関連エントリ ポップなデザインが印象のアイコンフォント「Prestashop Official Icon Pack」

blakedotvegas/vidbg GitHub HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 背景に動画をつかっているサイトはよく見かけるようになりましたが、それをお手軽に実現できるプラグインです 関連エントリ 動画を画像に変換して連続再生させて動画風に見せられる「Frame Player」 画像を並べて動画プレイヤーで動画っぽく表示できる「Jquery image player」 商用利用もフリーの動画素材投稿サイト「Distill」

iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」 2015年09月09日- Iframe-resizer by davidjbradshaw　デモ iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」。 iframeってお手軽に使えるんですが、iframe内外のJSが連携するのは別ページであるので面倒であったり、更にクロスドメインが絡むのでややこしいんですよね。 iframe内のresizeイベントが取れるので、JSで動的にコンテンツのサイズが増えても、自動リサイズが出来たりするようです 関連エントリ iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」 image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload

Inspiration for Text Styles and Hover Effects | Codrops SVG、Canvasを使った次世代のテキストホバーエフェクト集。 ホバーでテキストにきりこみを入れたり、バックグラウンドアニメーションを入れたり、とにかく一見の価値ありです。 関連エントリ 画面要素のカラーリングをドラッグ＆ドロップで行うコンセプトUI トランポリン風に画像を切り替えるエフェクト実装デモ CSSアニメーションによるクリックアニメーション実装チュートリアル オーガニックフードの30個のピクトグラムアイコンセット

cbfranca/vertical-responsive-menu GitHub レスポンシブに使えるクオリティの高いサイドメニュー実装「vertical-responsive-menu」 スマホ時にはよくあるサイドから開くメニュー。PC、タブレットの場合はFacebook風のサイドメニューになるメニュー実装が可能です。 メニューには階層が付けられ、デフォルトのデザイン的にもいい感じです。 関連エントリ スマホ用メニューっぽいスライドするメニューが作れる「jQuery Sliding Menu」 メニューが多い場合のMegaメニューのドロップダウン実装「Animated-megadrop」

Jquery image player | UIPlayGround 画像を並べて動画プレイヤーで動画っぽく表示できる「Jquery image player」。 画像を並べるといえばスライドショー的なUIが一般的ですが、こちらは再生/停止ボタンとプログレスバーのみ、というより動画的なUIとアニメーションを加えて動画のような表示が可能です。 動画にするとファイルサイズの問題もありますが、あくまで画像ということで高品質で軽量の動画埋め込みが可能です。 テキストの埋め込みなども可能で、プレゼンテーション的な用途での利用もできそう 関連エントリ 動画パスを指定するだけで簡単に背景動画を設定できる「video-background-js」 動画をクールにモーダル化してハイライトできるjQueryプラグイン「Video Lightning」 Youtube,Vimeo,Dailymotion等の動画

Squire HTML5ベースのWYSIWYGエディタ「Squire」 フラットでシンプルなデザインのWYSIWYGが実装できます。スマホでも動作。 関連エントリ スマホでも使えるWYSIWYGエディタ「Quill」 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」 定期的に自動保存してくれるWYSIWYGエディタ「Smalleditor」 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」

waitMe CSSで14種のローディングアニメーションが実現できる「waitMe」。 次のようにフォーム送信時等にアニメーションを14種の中から選んで実装可能 呼び出しコードは以下のようにカスタマイズ性があるけど簡単。サイズや色など、テキストが自由にかえられて、どんなサイトでも使えそう 関連エントリ 背景色をなめらかに変更できるjQueryプラグイン「Spectrum」 １つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 タイル上にエレメントを並べられるjQueryプラグイン「jMosaic」 ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」 楽譜をWEB上で打ち込めるUI実装jQueryプラグイン「jsNoteEditor」

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou 超軽量でカスタマイズ性の高いオートコンプリート実装「Awesomplete」 2KBで次のようにオートコンプリートが実装できます。 実装方法は、補完したいデータを data-list で属性定義するだけ、という簡単さ。 次のように別途datalist タグでデータを定義する事も可能です @を入れた後のドメイン補完機能なんかも応用することで実現が可能 関連エントリ オートコンプリート可能なプルダウン実装「jquery.ajax-combobox」 オートコンプリートにテーブルを使える「Autocomplete-Table」 お手軽に使えるBootstrapベースのオートコンプリート実装jQueryプラグイン「comple

Slideout.js - A touch slideout navigation menu for your mobile web apps. ネイティブアプリに近い動作のサイドメニューWeb実装「Slideout.js」。 ネイティブに近い実装をするのはなかなか難しいですが、比較的いい感じの挙動のサイドメニュー実装がJSのみで実現できます。 関連エントリ シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」 開閉するサイドメニューの実装ができるjQueryプラグイン「tendina」 シンプルデザインなページサイドをメニューにできる「Simple Sidebar」

animatedModal.js CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」 モーダルというとポップアップウィンドウを思い浮かべますが、フルスクリーンで大きく使いやすそうなモーダル実装が出来ます。 フラットデザインで、タッチ端末にも使いやすそうな時代に沿ったモーダル画面になっています。 関連エントリ Bootstrapのポップアップ風デザインのモーダルを作成「Stackbox.js」 カスタマイズ性の高いモーダルダイアログ実装ができる「plainModal」 Bootstrapなサイトでいい感じのモーダルダイアログを実装できる「uiblock」

Gix075/jqueryIntroLoader GitHub ページ全体の読み込みアニメーションが簡単実現「jqueryIntroLoader」。 ページ全体が読まれるまで、ローディングアニメーションを表示させるjQueryプラグインです。 アプリなどではページ全体を読み終えるまでローディングアニメーションを表示する事が多いですが、WebViewベースでアプリっぽく、を実現する際に活用できそうです 関連エントリ 流行りのYoutube風ローディングバー実装jQueryプラグイン スクリプトで滑らかに動かすローディングアニメーション実装jQueryプラグイン「shCircleLoader」 超カッコ良いプレローディングエフェクトサンプル

How to Create (Animated) Text Fills | Codrops テキストをCSSやSVG等でアニメーションさせるやばいサンプル集。 WEB上でFlash等を使わずにこういうのはあまり見たことがない、かもしれないサンプル集です。 こういうことが出来るんだというのを知っておくという意味でも一度みておいたほうがよさそう 関連エントリ 超カッコいいテキストアニメーション効果を作れるjQueryプラグイン「LetterFX」 テキストが文字ごとにフェードインアニメーションする効果が作れるjQueryプラグイン「Revealing.js」

likethemammal/css-visualizer GitHub CSSアニメーションで音楽に視覚効果を与えられる「css-visualizer」 音楽プレイヤー等でよく見るビジュアリゼーションですが、CSSで実現、というのがなかなか面白いです 関連エントリ CSSでアニメーションを交えながらコンテンツをカッコよくフィルタリングするデモ ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 WEB上でCSS3アニメーションを組み立てられる「Bounce.js」

Top 20 Best Free Fonts for Logo Design [NEW!] ロゴ等につかえそうなフリーフォント２０。 使えそうなフォントをDLしておいてもよいかも。 関連エントリ FontAwsomeのアイコンフォントをCSS3でアニメーションさせる「Font Awesome Animation」 Chromeで新しいタブを開くたびに新しいフォントと色の発見ができるChrome拡張「Palettab」

Elastic SVG Elements | Codrops びよーんと伸びるブロック要素の実装デモ集「Elastic SVG Elements」 ブロック要素は四角が基本ですが、次のようにメニューをビヨーン、と変形させて、リアルな物体が動いている風に見せられるデモ集。 メニューの他、各要素を変形させたデモ集が面白く勉強にもなります 関連エントリ ドラッグ＆ドロップにまつまるUIデザインのアイデア集

joaopereirawd/fakeLoader.js GitHub モダンなローディングエフェクトが実装できる「fakeLoader.js」。 ページ全体にオーバーレイ効果をかけ、中央にスピナーアニメーションを配置する形式のローディング画面が簡単実装できます。 最初に用意されているローディングアニメーションの他、独自に画像などを設定することも可能 関連エントリ いい感じに動くフラットデザインのローディングインジケーター「SVG Loaders」 超カッコ良いプレローディングエフェクトサンプル ページ内のローディングをもっとオシャレにできる「Progress.js」