PIGNOSE ParallaxSlider パララックス効果がクールなスライダー実装「PIGNOSE ParallaxSlider」 イカしたアニメーション効果のスライダー実装が可能です。 関連エントリ 範囲指定用のスライダーUIをリッチに作成できる「jquery-rsSliderLens」 範囲指定のスライダーUIを簡単に実装できる「RangeTouch」 スライダーで画像の比較ができる「jQuery TwentyTwenty Plugin」

Material UI Kit Freebie - Download Photoshop Resource - PSD Repo マテリアルデザインのUI Kit PSD「Material UI Kit」 次のようなマテリアルデザインのUIが詰まったPSDがダウンロード可能 関連エントリ GoogleInbox風のマテリアルプレローダー「prelodr」 マテリアルデザインのカッコイイ日付ピッカー「Material-datetime-picker」

jQuery Now Open 開店/閉店を細かく指定して切り替えられる「jQuery Now Open」 お店のホームページなどで、今オープンしているかどうかを表示したいようなケースで、簡単にそれを実現するjQueryプラグインです。 if分岐よりも分かりやすく書くことができるようです 関連エントリ テーブルのヘッダーを固定表示することが出来る「jQuery.floatThead」 ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」 枠のサイズに応じてテキストを自動省略できる「Jquery-quickfit」 綺麗な右クリックコンテキストメニューを実装できる「jQuery contextMenu」

Stripe.com Navigation in CSS and jQuery | CodyHouse 「stripe.com」のようなモダンで美しいレスポンシブなナビゲーション実装サンプル PC版のナビゲーションはアニメーションしながらポップアップがきれいに切り替わり、スマホ版はハンバーガーメニューのような感じで縦に並ぶという使いやすそうなナビを実装できます。 関連エントリ スクロールで消えるレスポンシブなナビゲーションサンプル jQueryとCSSで水平のタイムラインの実装デモ

GitHub - tin-cat/jquery-mosaic: A free plugin for jQuery to build responsive mosaics of images or any other content fitted to match heights in multiple rows while maintaining aspect ratios. レスポンシブなタイル状レイアウトを実現できる「jquery-mosaic」 タイル状レイアウトを実装するものもレスポンシブ対応できないものもありますが、こちらは対応可能で安心して使えそうです 関連エントリ JS＆CSS3でWindowsMetroのタイルUIを実装する「TileJS」

GitHub - ctruelson/hotmenu: A responsive, full-screen jQuery menu. レスポンシブなフルスクリーンメニュー実装「hotmenu」 タッチ端末でも使いやすそうなシンプルなフルスクリーンメニューを実装できます。 かなりシンプルですが、これぐらいシンプルな方が迷わず使えそうです 関連エントリ 綺麗な右クリックコンテキストメニューを実装できる「jQuery contextMenu」 レスポンシブに動作するメガメニュー実装「megamenu.js」 画面スクロールでフッターからメニューが表示される「footerMenu」 Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hoverify Bootnav」

Ultimate image hover effects using css3 - Usingcss3 CSS3を使った超クールなホバーエフェクトのサンプル集 3Dエフェクト等を活用した様々なエフェクトが多数収録されています。実用的なものから、インパクト重視の場合に使えそうなエフェクトがあるため、便利に使えそうです 関連エントリ 次世代のCSSホバーエフェクト全部のせ「iHover」 CSS3でホバーエフェクトをこれでもかというぐらい集めたサンプル集 CSSホバーエフェクトの30のネタ帳 BootstrapのDropdownメニューをホバーで開くように出来るプラグイン「bootstrap-hover-dropdown」 アンカーにホバーすると全画面でGIFアニメーションが再生される「GifLinks」

GitHub - VPenkov/okayNav: The world's okayest responsive navigation 画面サイズ目一杯使えるレスポンシブなナビゲーションメニュー実装「okayNav」 スペースの空きのある部分はメニューを表示し、足りなくなった部分は…で折りたたむという挙動のレスポンシブメニュー。 一気に折りたたんでしまうよりもサイズに応じてできるだけ使えるようにしたい場合に使えそうです 関連エントリ ページサイドにセクションのナビゲーションを自動生成する「Section Scroll」 これは新しい、クールなナビゲーション・メニュー実装デモ ナビゲーションとコンテンツが同期して分かりやすいナビ実装「NavSync」 特定要素をスクロールに応じて固定ナビゲーションにできる「Clingify」

Sliding Panels Template in CSS and jQuery | CodyHouse レスポンシブなスライドするパネル型の斬新なUIレイアウトデモ。 パネルが４つ並んで、タップすると記事が表示されるというUIのデモです。 デモページ 関連エントリ レスポンシブで大きめの押しやすいサイドバーを実装するデモ 記事をどこまで読んだか、SVGとCSSでより分かりやすくしたサンプル

モダンなプレゼンテーションをブラウザで表示できる「Shower Presentation ... 次の記事 ≫：ページサイドにセクションのナビゲーションを自動生成する「Section Scr...

yasinbec/menupuncher GitHub ハンバーガーメニューから一気にフルスクリーンメニューを開けるようにする「menupuncher」 ドロップダウン、サイドメニューでもなく、一気にフルスクリーンとなりますが、タッチ端末ではこちらの方が使いやすそうです。 関連エントリ CSS＆jQueryで作るパネル型の3Dナビゲーション作成サンプル フルスクリーンでタッチデバイスでも使いやすいナビゲーションメニュー実装 ページ自体のサムネイルを作ってナビゲーションにできる「Minimap」

Full-Screen Menu Overlay - Ettrics フルスクリーンでカッコよくモダンにオーバーレイするメニュー実装デモ。 メニューが大変大きく、スマホでも便利に使えそうなナビゲーションが実装できそうです 関連エントリ ハンバーガーメニューから一気にフルスクリーンメニューを開けるようにする「menupuncher」 メニューが多い場合のMegaメニューのドロップダウン実装「Animated-megadrop」 レスポンシブに使えるクオリティの高いサイドメニュー実装「vertical-responsive-menu」 アプリ風のリッチなサイドメニュー実装「jQuery.SecretNav」

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

Horizon Swiper 水平スワイプが可能なスライダー実装ができる「Horizon Swiper」 7KB以下でPCでもスマホでも動くスライダーが実装できます 関連エントリ タッチ端末でスライダーを実装するならこれかも？なJSライブラリ「Swiper」 オシャレなフルスクリーンスライダーが作れるjQueryプラグイン「Nex」 タッチ端末でも使えるレスポンシブスライダー実装「lory」 タッチ端末でも動く数値入力のスライダーUI実装「rangeslider.js」

textarea内テキストをカラフルにハイライトさせられる「jquery.textarea-highl... 次の記事 ≫：SVG、CSSでアプリっぽいコミカルなローディングアニメーション実装「El...

Grid Item Animation Layout | Codrops 今風なグリッドxアニメーションするレイアウト実装デモ「Grid Item Animation Layout」。 グリッドをクリックすると画面遷移なしにアイテムが全画面に広がります。 関連エントリ 製品の比較を行える次世代のUI実装 ドラッグ＆ドロップにまつまるUIデザインのアイデア集

Background Blur - plugin by @msurguy 背景色にブラーをかけて今っぽくするjQueryプラグイン「Background Blur」 iOSなどで導入されているこの機能ですが、実装することでより今っぽくなります。 Photoshop等がなくてもこういうことが出来るようになったというのは本当に便利ですね 関連エントリ 画像の選択に便利なチェックボックス実装jQueryプラグイン「imgCheckbox」 画像ではない軽量CAPTCHAを実装できる「jQuery Real Person」 画像・動画にリアルタイムでフィルタをかけられるjQueryプラグイン「toCanvas」

LoadGo - Your own images as a progress bar サイトのロゴ等をプログレスバーにすることができるjQueryプラグイン「LoadGo」 たまにみかけるサイトのロゴ自体をプログレスバーにしてローディング状態を表示する機能を実装できます。 よりブランドについてユーザの方に認知してもらいたいというような場合に、そして単純にカッコイイということで使えそうです 関連エントリ フラットデザインでレスポンシブなプログレスバー作成「ProgressBar.js」 スクロールに合わせてプログレスバーを表示して進捗を分かりやすくする「Scrolling Progress Bar」 アニメーションするPOPなデザインのプログレスバー実装jQueryプラグイン「jQMeter」

エレメントにサウンドを自由に付けられるjQueryプラグイン「easyAudioEffec... 次の記事 ≫：ダイアログをアプリっぽくマウスで摘んで移動させるUI作成チュートリ...

Flatastic Mobile UI Kit | The Design Inspiration フラットな大量のコンポーネントが詰まったフラットなモバイルUIキット「Flatastic Mobile UI Kit」 次のようなフラットで美しいモバイルUIキットがダウンロード可能です。PSD、PNGの形式が利用可能です UIデザインの参考にしたり、活用したりできそう 関連エントリ 100以上のコンポーネントUIが詰まったフラットデザインのUIキットPSD素材「Flatic」 フラットなUIデザインキットPSD25個