迫力のあるページ切り替えが可能なマルチスクロール効果実装「multiscroll.js」:phpspot開発日誌
multiscroll.js - split multi-scrolling pages plugin 迫力のあるページ切り替えが可能なマルチスクロール効果実装「multiscroll.js」。 ページを半分に分割してそれぞれ逆方向にスクロールして迫力のあるページ切替え効果が作れます パララックスはもうよくみる物になってしまいましたが、こちらは新鮮かも。 関連エントリ フルページスクロールするサイトを作るのに使える「fullPage.js」 スクロールに連動してアニメーションやパララックス効果が作れる「ScrollMagic」 スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 完璧なスクロールバーを実現できるjQueryプラグイン「perfect-scrollbar」 スクロールにより積み重なるナビゲーションヘッダーを作れる「Slinky.js」
オシャレで高機能なドロップダウンを実装できるjQueryプラグイン「jquery-hover-dropdown-box」:phpspot開発日誌
jquery-hover-dropdown-box by mugifly オシャレで高機能なドロップダウンを実装できるjQueryプラグイン「jquery-hover-dropdown-box」 次のようなカラーによるラベリングやチェックボックス機能、新規アイテム追加機能など高機能なドロップダウンが実装できます。 関連エントリ レスポンシブでクールなドロップダウンメニュー実装例 マルチカラムなドロップダウンメニューが実装できるjQueryプラグイン「SooperFish」 ドロップダウンをフラットでクールにするjQueryプラグイン「EasyDropDown」
アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」:phpspot開発日誌
MixItUp アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 これはなかなか汎用性があって便利そう。デモサイトではレスポンシブにもなっていて、タッチデバイスでも快適に使えそうです。 ブログ、ポートフォリオサイトなど、実装すればよりモダンでクールなサイトに仕上がりそうです。 関連エントリ 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 クールに実装できるレスポンシブなモーダルダイアログ「Remodal」 レスポンシブサイト用レイアウトフレームワーク「Grid」 レスポンシブかつフラットなソーシャルボタンを実
クールに実装できるレスポンシブなモーダルダイアログ「Remodal」:phpspot開発日誌
Remodal クールに実装できるレスポンシブなモーダルダイアログ「Remodal」 レスポンシブ対応のモーダル表示ライブラリもちらほら出てきていますが、こちらは、モバイル表示時にモーダルっぽさをなくした全面表示というのがカッコよく新しいライブラリです。 PC版はこれまで同様のモーダル表示。表示がフラットで若干モダン スマホの場合は全画面表示。なんかこの方がカッコいい気がします。 別にフローティングなエフェクトは画面の無駄ですし必要ないという所が合理的で表示もクール。 関連エントリ CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 何でも埋め込めてカッコいいモーダ
フラットな円形のプログレスバーを実装できるjQueryプラグイン「Circliful」:phpspot開発日誌
jQuery Circliful Plugin - Documentation フラットな円形のプログレスバーを実装できるjQueryプラグイン「Circliful」。 次のようなカッコいいデザインでアニメーションするプログレスバーの実装が可能。ローディング画面などに使えそうですね 関連エントリ テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」 ガントチャートとタスクツリーが作れるjQueryコンポーネント「Teamwork Gantt」 フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」
GoogleMapを使って場所の選択や追加、削除、検索を可能にするjQueryプラグイン「mappy.js」:phpspot開発日誌
mappy.js - jQuery plug-in for Google Maps and Places API integration GoogleMapを使って場所の選択や追加、削除、検索を可能にするjQueryプラグイン「mappy.js」 利用者がマップに情報を追加したり、追加された情報を選択したり、検索したりするUIが作れます 地図情報と絡めたようなサービスを作る際に活用できそうです。 関連エントリ Googleマップを好みの色にカスタマイズできるスタイルまとめ「Snazzy Maps」 素早く簡単にGoogleマップを導入できるjQueryプラグイン「initmap.js」 2Dの地図をリアルな3Dにして3Dマップを作れるPhotoshopアクション
レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」:phpspot開発日誌
VenoBox - responsive jQuery modal window plugin レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 LightBox派生スクリプトは多々ありますが、レスポンシブでクールなフラットデザインで、地図、動画、画像、iframeなどなんでも埋め込めるので、今の時代にかなり使いやすそう。 関連エントリ フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」 LightBoxはここまで進化したよ「VisualLightBox」
クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」:phpspot開発日誌
:: Alessandro Ferrini :: FerroSlider jQuery Plugin クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 iPhone、iPadなどのタブレットでもレスポンシブに表示されるだけでなく、PCでもタッチ操作も可能なスライダが実装可能 自動再生機能の他、上下左右にスライドを送れるようなユニークな機能も付いている模様。 関連エントリ レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCra
複数階層のサイドメニューを実装するデモ＆サンプル:phpspot開発日誌
Multi-Level Push Menu | Codrops 複数階層のサイドメニューを実装するデモ＆サンプル スマホのFacebookアプリ等でおなじみのサイドメニュー。タッチ端末では結構使いやすいわけですが、これを階層化してみたデモです。 単に折畳み型のUIでもよさそうですが、こちらのデモでは更にサイドバーを被せるようにしてクールに下層のメニューを展開できます。 １つの実装方法として覚えておくと便利そうですね。 関連エントリ Nexus7のページっぽいカッコいいページ作成チュートリアル「Google Nexus Website Menu」 邪魔にならない検索ボックスを作るチュートリアル レスポンシブなアイコングリッド作成チュートリアル モダンなサイトを作成するためのCSS3チュートリアル集
Google風スリムでクールなプログレスバー実装JS「NProgress」:phpspot開発日誌
NProgress: slim progress bars in JavaScript Google風スリムでクールなプログレスバー実装JS「NProgress」 次のようにページ上部にプログレスバーと円形ナビゲーションが表示され、必要最小限のプログレスバーが実現可能。 通常のページではあまり使えないかもしれませんが、アップローダーやAjaxで実装されたアプリケーションなどに使えそうです 関連エントリ スピード感が凄いプログレスバー実装ライブラリ「progress.js」
フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」:phpspot開発日誌
Nivo Lightbox - Dev7studios フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 次のようにシンプルなフラットデザインを採用したLightBoxが実装できます。 こういうところまでフラット化の波が押し寄せています。ざっぱ〜ん。 フラットなようで若干シャドウを使って立体的に見せているあたりもカッコいい。 iFrameやSWF,Youtube,Vimeoなどにも対応していてかなり使い勝手がよさそうです。 関連エントリ 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 LightBoxはここまで進化したよ「VisualLightBox」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」
スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」:phpspot開発日誌
ScrollIt.js by @ChrisPolis スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」 ↑↓キーでページがスクロールし、かつナビゲーションメニューも備えたようなページが作れます 何らかの製品等の紹介サイトを１ページでサクっと作りたい場合に使いやすく、分かりやすいページが作れて便利かも ページごとダイナミックに切り替わるあたりもクールでモダン。 関連エントリ 縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」 アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」 スクロール
FlatなUIが美しいJSレスなUIライブラリ「TopCoat」:phpspot開発日誌
TopCoat FlatなUIが美しいJSレスなUIライブラリ「TopCoat」。 デスクトップ、モバイル対応でレスポンシブ、CSSで作られたUIライブラリです。 Bootstrapよりフラットなデザインが特徴でしょうか。Bootstrapのライバルとなるような物が出てきて、それぞれよい面を取り入れていってほしいですね 関連エントリ フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 BootstrapをベースとしたフリーのUIKit「Flat UI」
BootstrapをベースとしたフリーのUIKit「Flat UI」:phpspot開発日誌
Flat UI BootstrapをベースとしたフリーのUIKit「Flat UI」。 BootstrapをベースとしているのでBootstrapの使い方や機能は使えてデザインが全く別物になってます。 Bootstrapで作るとあきらかにBootstrapな感じが出てしまいますが、ちょっと個性を出したいという場合はいいかもですね。 こうした派生スタイルが多数でてきて、Bootstrap自体がjQueryのようにデファクトスタンダードになってくると、多数の派生ライブラリが出てきてより開発者にとってはいい環境になりそう。 関連エントリ Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 Bootstrapで
レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」:phpspot開発日誌
レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 2013年03月05日- Sidr - A jQuery plugin for creating side menus レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 iPhoneのfacebookアプリなどで採用されている左や右にスライドするメニューをブラウザ上で実現できるjQueryプラグインです PCでも違和感なく使えるのは嬉しいですね メニューが開いていない状態。 開くと画面が左にスライドしつつ左からメニューが表示されます テーマも白と黒から選べるみたい 関連エントリ Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」 HTML5＆CSS3なフリーのドロップダウンメニュー２５ レスポンシブなCSSベー
モダンなサイトを作成するためのCSS3チュートリアル集:phpspot開発日誌
Latest CSS3 Tutorials For You To Create Modern Websites モダンなサイトを作成するためのCSS3チュートリアル集。 CSS3のテクニックがあつまったチュートリアル集のご紹介。自分に無い知識を取り入れるために参考にできそう。 いつも進んでる感を感じますが、もうずっと進化し続けるんでしょうね。 関連エントリ CSS3でChrome風ウィンドウを作成するチュートリアル 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 CSS3でボーダーを超かっこよくアニメーションするサンプル CSS3ベースのオシャレな価格表作成チュートリアル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PHP＆MySQLを使ったログインを提供するスクリプト「A PHP Login Script」:phpspot開発日誌
素早く簡単にGoogleマップを導入できるjQueryプラグイン「initmap.js」:phpspot開発日誌
リアルなアナログ時計が実装できるjQueryプラグイン「FlipClock.js」:phpspot開発日誌
画像をRetina用にリサイズしてくれるフリーのPhotoshopアクション「Retinize It」:phpspot開発日誌