ブラウザの戻るボタンクリックを検出して処理を書けるようにする「Jquery-backdetect」:phpspot開発日誌Jquery-backdetect by ianrogren ブラウザの戻るボタンクリックを検出して処理を書けるようにする「Jquery-backdetect」 ブラウザの戻るボタンが押された際に何かしらのアクションを促したり、Analytics等でイベントトラッキングしたりといった事に使えそうです 関連エントリ 美しいUIの月間イベントカレンダー実装jQueryプラグイン「Monthly.js」 時系列のイベント表示に使えるUI「EventControl」
ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」:phpspot開発日誌
Home - jQuery.smoothState.js ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」 WEBページというと画面遷移で一旦画面がクリアされて再描画されるため、アプリっぽい体験にすることは通常難しいですが、こちらのプラグインを使って、よりアプリっぽいWEBページ作りが出来ます。 ページ遷移後はURLもa.html→b.htmlのように変わるため、ブックマークやSEO的にも問題のないWEBページ作りに役立てられます 関連エントリ ページ遷移を意識させないアニメーションによるページ切り替え効果実装 モダンでかっこいいページ遷移アニメーションサンプル
iOSの3Dタッチ/ForceタッチをWEB上でも実現できるJS「Pressure.js」:phpspot開発日誌
Pressure.js iOSの3Dタッチ/ForceタッチをWEB上でも実現できるJS「Pressure.js」 押す強さに応じてiOS端末でアクションを変化させられる機能がJSでも使えます。 タッチの強さが数値で取れるのでそれに応じた処理を入れることができます。 関連エントリ HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 mo.jsを使って、いいね！アイコンをクールにアニメーションさせるデモ ブラウザトップのプログレスバーを簡単実装できる「ToProgress.js」 画像の特徴色をJSで抽出できる「Colorify.js」 美しいUIの月間イベントカレンダー実装jQueryプラグイン「Monthly.js」 クールな予約UIを実装できる「booking-js」
レスポンシブで大きめの押しやすいサイドバーを実装するデモ:phpspot開発日誌
3D Bold Navigation in CSS and jQuery | CodyHouse レスポンシブで大きめの押しやすいサイドバーを実装するデモ。 クリックする前は普通のハンバーガーメニューですが、クリックすると大きく開いて押しやすいサイドバーのデモです。 立体的な表現やアニメーション等、芸が細かくて実用的なものがDLしてすぐ使えます 関連エントリ 上下左右に表示できるサイドバー実装jQueryプラグイン「Sidebar」
selectボックスをスマホネイティブ風にフルスクリーン化する「Bootstrap-fullscreen-select」:phpspot開発日誌
Bootstrap-fullscreen-select | Custom select element for Mobile interfaces. selectボックスをスマホネイティブ風にフルスクリーン化する「Bootstrap-fullscreen-select」 UIのテーマはAndroid,iOS,Mac風のテーマから選べるようです。タッチ系の端末では相性が良さそうです。 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flexselect」 階層的なselectボックスを実装できる「folderselect.js」
レスポンシブデザインにも対応した多機能カルーセル実装jQueryプラグイン「slick」:phpspot開発日誌
slick - the last carousel you'll ever need レスポンシブデザインにも対応した多機能カルーセル実装jQueryプラグイン「slick」 amazonの関連アイテム、などでも使われているカルーセルがレスポンシブ対応かつ、豊富な機能がついていて、便利に使えそう カスタマイズ性が高いのも特徴のようです。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブサイト用レイアウトフレームワーク「Grid」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」
見るだけでUIの勉強になるUIのアニメーションをまとめた「User Interface library」:phpspot開発日誌
User Interface library 見るだけでUIの勉強になるUIのアニメーションをまとめた「User Interface library」 サンプルコードではありませんが、UIの挙動がGIFアニメーションで大量に掲載されていて、UIの研究に使えそう 関連エントリ フラットで超カッコいいUIライブラリ「Semantic UI」 FlatなUIが美しいJSレスなUIライブラリ「TopCoat」 Bootstrap3のUIをベクター形式でダウンロードできる「Bootstrap 3 UI Kit」 机上にポラロイド写真が散らばったようなUIのデモ BootstrapベースのフラットUI実装フレームワーク「Furatto」 Yahooが作ったピュアCSSのUIライブラリ「Pure」
新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」:phpspot開発日誌
Justified Gallery 新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」。 PinterestというよりはFlickrの最近変わった新しいギャラリーっぽいギャラリーが簡単に実装できます 次のようにタイル上に敷き詰められ、カーソルを合わせるとキャプションがでるというものです。 高さやマージンの調整等、色々と細かなカスタマイズもできるみたい。 関連エントリ レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 PCでもスマホでもスワイプできるギャラリー実装プラグイン「jQuery.swapgallerywithdots」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 Google画像検索っぽい画像ギャラリーが作れるjQuer
要素をスクロール中に自動で固定する「jQuery Auto Fix Anything」:phpspot開発日誌
jQuery Auto Fix Anything by Pete R. | The Pete Design 要素をスクロール中に自動で固定する「jQuery Auto Fix Anything」。 ページを開いた際には通常表示でスクロールと共に固定されるサイドバー等を実装する際に使えます。 スクロールするとサイドバーが固定されます。 固定されていた方がいつでもアクセスできて便利な部分は固定されていたほうがいいですね。 関連エントリ レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」 カスタマイズが容易なカレンダー生成jQueryプラグイン「CLNDR.js」 Pathみたいなメニューが実装できるjQueryプラグイン「Ferro Menu」 クー
スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」:phpspot開発日誌
stickUp - a free jQuery Plugin スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 最初からposition:fixedではなく、一定以上スクロールした段階でfixedにしてくれるプラグインです。 シームレスにナビが固定されるあたりがクールだったりしますが、これを簡単に実装できます。 関連エントリ レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 クールな円形ナビゲーションを作るチュートリアル
iOSスタイルのオーバーレイ通知を実現するJS「iosOverlay.js」:phpspot開発日誌
iosOverlay.js iOSスタイルのオーバーレイ通知を実現するJS「iosOverlay.js」 webviewを使ったアプリ等でよく見られるローディング表示を通常のブラウザでも実現できるライブラリです 分かりやすくて既存デザインを崩さないローディングということでAjaxアプリなどで使えそうです 関連エントリ ボタンに直接ローディングアニメーションを付けられる「Ladda」
複数階層のサイドメニューを実装するデモ＆サンプル:phpspot開発日誌
Multi-Level Push Menu | Codrops 複数階層のサイドメニューを実装するデモ＆サンプル スマホのFacebookアプリ等でおなじみのサイドメニュー。タッチ端末では結構使いやすいわけですが、これを階層化してみたデモです。 単に折畳み型のUIでもよさそうですが、こちらのデモでは更にサイドバーを被せるようにしてクールに下層のメニューを展開できます。 １つの実装方法として覚えておくと便利そうですね。 関連エントリ Nexus7のページっぽいカッコいいページ作成チュートリアル「Google Nexus Website Menu」 邪魔にならない検索ボックスを作るチュートリアル レスポンシブなアイコングリッド作成チュートリアル モダンなサイトを作成するためのCSS3チュートリアル集
CSSアニメーションでページを紙芝居の様に切り替えるデモ:phpspot開発日誌
A Collection of Page Transitions | Codrops CSSアニメーションでページを紙芝居の様に切り替えるデモ。 迫力のある全画面切り替えをCSSで実現しており、そのアニメーションの種類も豊富で良いサンプルになっています。 デモとして学習用にもよさそうですが、Windows8っぽいプレゼン資料なんかを作る際にも使えそうです デモページ 関連エントリ Yahooが作ったピュアCSSのUIライブラリ「Pure」 エレメント上にラベルを付けるためのCSS「Label.css」 Flashみたいに美しいCSSテキストアニメーションデモ HTML/JS/CSSでAndroidアプリ風UIを作るフレームワーク「Fries」 自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザ上で画像の簡易編集機能を実現できる「photo-editor」:phpspot開発日誌
レスポンシブでクールなプレゼン用スライドショー実装デモ:phpspot開発日誌
これは新しい、クールなナビゲーション・メニュー実装デモ:phpspot開発日誌
メニューアイコンがSVGで超カッコよくアニメーションするメニュー実装デモ:phpspot開発日誌
リッチなON/OFFスイッチUIを実装できる「rcswitcher」:phpspot開発日誌
カッコ悪いinput[type=file]をモダンにしてドラッグ＆ドロップ対応にする「Dropify」:phpspot開発日誌
画像をiOS,Android端末にプレビューできるMacアプリ「Skala Preview」:phpspot開発日誌