Animating an SVG Menu Icon with Segment | Codrops メニューアイコンがSVGで超カッコよくアニメーションするメニュー実装デモ SVGを使えばこういうこともできるのか、という勉強にもなります。 アプリみたいくカッコいい一方で高度な事もできるため、こういうところでも差をつけるとなると負担は増えていきそうな気もしますね 関連エントリ レスポンシブで大きめの押しやすいサイドバーを実装するデモ CSSアニメーションでページの表示時に要素を小気味よく動かすデモ集

Twitter Heart Button CSS3 Animation TwitterのハートボタンのCSS3アニメーションの再現チュートリアル 先日変更されたTwitterのハートマークのアニメーションを自サイトで再現できます 関連エントリ 要素にclassを指定できるだけでcss3アニメーションさせられる「ALL ANIMATION CSS3」 css3でハードウェアベースの高速アニメーションが実装できる「jquery.hx」 CSSアニメーションの終了をJSで検知してコールバックを実行できるJS JSでActionScript3ライクにピュアCSS3な高速アニメーションを生成できる「Agile Css3 Engine」 CSSアニメーションで音楽に視覚効果を与えられる「css-visualizer」

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

Lobianijs - Responsive jQuery messagebox and notification plugin available for commercial and non-commercial usages メッセージボックスや通知ダイアログ表示コンポーネントが多数詰まった「Lobianijs」 標準やBootstrap標準ではないようなダイアログ、通知のコンポーネントが利用できます 通知系。サウンドも鳴らすことができます 関連エントリ モダンなUIでモーダルダイアログを出すことができる「jQuery Popdown」 iOS風のモーダルダイアログを実装できる「basicModal」 確認ダイアログ（window.confirm）の実装をクロスブラウザで統一できる「jquery.confirm」 アニメーションするモダンなモーダルダイアログを汎用的につくれる「cta

Filter Blend - CSS blend modes and filters playground CSSで２枚の画像をPhotoshopばりにブレンドして遊べる「Filter Blend」 CSS3のbackground-blend-mode、filterプロパティを使ってどういうことができるのかを遊びながら学べます 関連エントリ JSでActionScript3ライクにピュアCSS3な高速アニメーションを生成できる「Agile Css3 Engine」 css3でハードウェアベースの高速アニメーションが実装できる「jquery.hx」 CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」 CSS3でブロックで組み上げたような文字グラフィックをつくれる「ISO-BLOCKS」

andchir/jquery-video-extend GitHub HTML5動画プレイヤーを拡張させられる「jquery-video-extend」。 動画にロゴを入れたり、動画の位置をマーキングしたり、Youtube/FLV再生に対応したり、レスポンシブ対応にしたりといった拡張が利用できます 関連エントリ HTML5ベースのWYSIWYGエディタ「Squire」 HTML5での追加・廃止タグ・ブラウザサポート等が一目で分かる「The HTML 5 Mega Cheat Sheet」 リッチなHTML5ベースの画像編集エディタがサイト内に実装できる「Pixie」

jQuery.editable フォームのインライン編集を簡単に出来る「jQuery.editable」。 クリック、ダブルクリックやホールド等のアクションをトリガとしてテキストの編集が可能に。 普通にjQueryで書くよりもすっきり書けて可読性もあがりそうです 関連エントリ フォームのfile入力部分のUIを綺麗に整形できる「jQuery Filestyle」 ツリー型の階層的なアイテムを選んで送信できるフォームUI実装jQueryプラグイン「Tree Multiselect」

PHP/HTML5/CSS3/JavaScript/CSS等の最新技術情報をお届け

Kouta-web/jQuery.BackgroundScroll.js GitHub 自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」 複数の画像を自由な方向にアニメーションさせられるようです 関連エントリ 3Dのクールな線形アニメーションをブロックの背景にするjs 動くパーティクルを背景に設定できる「particles.js」 背景画像をカッコよくアニメーションして今風にする「CROSSCOVER」 SVGを使って動的に背景に斜線をいれてクールにする「Lines.js」 自動伸縮するフルスクリーン背景を簡単に設定できる「Fullscreener」

auxiliary/rpage GitHub BootstrapでのPaginationのUIをレスポンシブ化する「rpage」 ページ幅と共に、PaginationのUIを拡大・縮小させられるjQueryプラグインです 意外とこの部分は対応が難しいせいか、レスポンシブ化が進化していないように思いますがこうしたプラグインが出てきたようです 関連エントリ BootstrapのDropdownメニューをよりリッチにすることができる「Bootstrap-dropselect」 Bootstrapのポップアップ機能を拡張できる「ggpopover.js」 BootstrapのDropdownメニューをホバーで開くように出来るプラグイン「bootstrap-hover-dropdown」 BootstrapでiOSアプリ風UIを作るBootstrapテーマ「Bootstrap iOS7」

nuContextMenu クールな独自の右クリックコンテクストメニューを実装できるjQueryプラグイン「nuContextMenu」 次のようにカッコいいコンテクストメニューが実装できます。対象の要素をセレクタで指定できるので、指定要素に対するコンテクストメニューが簡単に作れそうです 関連エントリ ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」 アニメーション切り替えがカッコイイタブUI実装jQueryプラグイン「tabtab.js」 独自デザインのソーシャルシェアボタンが実装できるjQueryプラグイン「jsSocials」 必要な機能は全部入ったモダンなLightBox実装jQueryプラグイン「lightGallery」 エレメントにサウンドを自由に付けられるjQueryプラグイン「easyAudioEffects.js」

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

bartholomej/material-scrolltop GitHub マテリアルデザインのスクロールトップに移動するボタンを実装できる「material-scrolltop」 スクロールすると小気味よく出現するトップに戻るボタン実装が出来ます。 関連エントリ WEB上でのマテリアルデザイン実装フレームワーク「Material Design Lite」 マテリアルデザインのショーケースサイト「MaterialUp」

Cropper WEB上での画像の切り取りの決定版jQueryプラグイン「Cropper」。 かなり多機能でインタフェースもシンプルかつ美しい画像切り抜きUIが実装できます 切り抜きに関してはこれでいいんじゃないかというほど多機能となっているようです。 関連エントリ 画像を指定サイズで切り抜きたい場合に使えるUI実装jQueryプラグイン「croppic」

Tabella js 横に長いテーブルもレスポンシブに使えるようにする「Tabella js」。 横長テーブルを一定の幅に調整し、スクロールボタンをつけることでレスポンシブにも対応。 スワイプでテーブルを横スクロールできてスマホでもいい感じに使えるテーブルが実装できます 関連エントリ テーブル内容の編集がその場で出来て便利になる「jQuery-Tabledit」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」

Stretchy: Form element autosizing, the way it should be. 内容に応じて自動リサイズするフォーム要素がつくれる「Stretchy」 textareaの他にinput type="text"やselectも内容によって自動リサイズをかけられます。 最初は要素を小さめにしたいような場合につかえそうです 関連エントリ Windowリサイズ完了時のコールバックを設定できるようにするjQueryプラグイン「Resize End」 iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」 textareaを入力値によってリサイズできるシンプルなjQueryプラグイン「autoresize-textarea」

RobertoPrevato/jQuery-KingTable GitHub テーブルのソート・フィルタ機能等、超多機能テーブルに変形させられる「jQuery-KingTable」 テーブルを次のように超リッチにしてくれます。ページング、フィルタ、ソート等便利に使えます テーマも色々えらべます 関連エントリ テーブル内容の編集がその場で出来て便利になる「jQuery-Tabledit」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ヘッダ、フッタを固定したテーブルを実装できるjQueryプラグイン「jTableScroll」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」

Material Design swipe to refresh マテリアルデザインのPullして更新をWEB上で実現できるjQueryプラグイン アプリでお馴染みのUIをスマホWEBでも使えます。 関連エントリ Pull to Refresh風にPullしてシェアできるUI実装チュートリアル

Effect Ideas for Card Stacks | Codrops 積み重なったカードをめくるアニメーションのアイデア集 カードをめくる風UIを作る際に使えそうな豊富なアニメーションのアイデアが多数。 お好みのアニメーションが見つかりそうです 関連エントリ ドラッグ＆ドロップにまつまるUIデザインのアイデア集 今風なグリッドxアニメーションするレイアウト実装デモ「Grid Item Animation Layout」