Home - jQuery.smoothState.js ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」 WEBページというと画面遷移で一旦画面がクリアされて再描画されるため、アプリっぽい体験にすることは通常難しいですが、こちらのプラグインを使って、よりアプリっぽいWEBページ作りが出来ます。 ページ遷移後はURLもa.html→b.htmlのように変わるため、ブックマークやSEO的にも問題のないWEBページ作りに役立てられます 関連エントリ ページ遷移を意識させないアニメーションによるページ切り替え効果実装 モダンでかっこいいページ遷移アニメーションサンプル
lukejacksonn/GreedyNav GitHub|CodePen - Greedy Navigation レスポンシブでメニューの数が分かりやすいナビを実装できる「GreedyNav」。 次のようなナビゲーションを実装でき、Windowによって隠れてしまっている物はハンバーガーメニューと共に、バッジで残りメニュー数を表示するという物が実現できます 関連エントリ ナビゲーションとコンテンツが同期して分かりやすいナビ実装「NavSync」 CSS&jQueryで作るパネル型の3Dナビゲーション作成サンプル 特定要素をスクロールに応じて固定ナビゲーションにできる「Clingify」 ホバーするとフリップするナビゲーションメニューが実装できる「menuFlip」
Dynamic Timeline 綺麗でレスポンシブなタイムラインのUIを作成できるjQueryプラグイン「Dynamic Timeline」。 次のようなデザインで、たて型、ヨコ型のデザインのタイムラインのUIを生成できます。 関連エントリ 画面にリアルな雪を降らせられるjQueryプラグイン「Snowfall」 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 画面から外れた際に要素をfixed固定できる「jquery-scrollfix」 座席番号の予約機能などに使えそうなjQueryプラグイン「jQuery-Seat-Charts」
liabru/jquery-match-height GitHub ブロック要素の高さをレスポンシブに揃えられる「jquery-match-height」 以下のように、高さの異なるブロックも瞬時に同じ高さに揃えて統一感が出せます ブラウザのリサイズで要素もリサイズされるので便利。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」 フラットでレスポンシブなギャラリー実装jQueryプラグイン「lightGallery」 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 レスポンシブでタッチフレンドリな軽量LightB
リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 2013年08月22日- Menutron リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」。 メニューがリストで並んでいるよくあるサイト。ブラウザの幅をせまくすると・・・ selectボックスけいしきのナビゲーションに変換してくれます。自動でやってくれるのは便利です。 リストを縦に並べるだけだとなんだか使いにくいサイトになってしまいそうですが、Selectにするのはなかなかスマートかも。 関連エントリ タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」 スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応でCSS3アニメーションを使った超クール
Dean Edwards: Sniff! My current frog exaggerator of choice JavaScriptでIEかどうかをたったの1行で判別する方法。 なんと、次の1行だけで、isMSIE 変数に、IEで見れば true 、そうでなければ false を代入することが出来ます。 var isMSIE = /*@cc_on!@*/false; 次のサンプルコードで確認しました。 <html> <script language="javascript"> var isMSIE = /*@cc_on!@*/false; if (isMSIE) { alert('IE!'); } else { alert('not IE!'); } </script> <body> </body> </html> IEであれば IE! を alert し、そうでなければ not I
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
jQuery TourBus サイトの使い方をその場で表示できるjQueryプラグイン「TourBus」 便利さ故にこの手のプラグインは増えて来ましたが、実装のしやすさなど個別に差異があると思うので選択肢の1つとして検証してみるのもよいかも 便利なライブラリが開発され、改善された派生ライブラリなどがこうして出てきて、定番が決まって、どんどんWEBは進化していくんですね 関連エントリ サイトの使い方をその場でステップに分けてオーバーレイできるJSライブラリ「Intro.js」
jQuery.mmenu slick app look-alike sliding menus for your mobile website アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」 この手のライブラリというかプラグインは色々と出ていそうですが、1つの選択肢として知っておくとよいのかも。 $("#nav").mmenu(); で簡単にメニューが初期化でき、オプションも豊富です 関連エントリ レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」 レスポンシブでクールなドロップダウンメニュー実装例 垂直アイコンメニュー実装デモ&サ
jQuery Vortex エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 製品画像などを動きをつけて回転させるなどの用途に使えそうです。 スピードの調整ができたり、奥行きなんかもパラメータで自由に調整できるので、平面的に回転させることもできるっぽい 関連エントリ スプライトアニメーション作成用jQueryプラグイン「Phantascope」 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」
| HTML5 Canvas Rich UI JavaScript Library 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 グリッド、ツリービュー、タブ、フォーム等のリッチコンポーネントが詰まっていてスマホも対応しているUIライブラリ UIに若干クセがありますが、テーマ機能もあるので、今後に期待したいライブラリです 関連エントリ jQuery用のよく使うUIコンポーネントセット「ZinoUI」 BootstrapをベースとしたフリーのUIKit「Flat UI」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 ページを下に引っ張ると更新されるiPhone風UIを提供するjQueryプラグイン「Hook.js」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 これは超使いやすい
Sieve jQuery Plugin テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」。 テーブル行数が多いと探すのが大変だったりしますが、このプラグインでインクリメンタル検索で表示要素を絞り込むことができるようになります。 地味に便利で簡単に実装できるので覚えておくとよさそう 関連エントリ HTMLのあらゆるエレメントに注釈を入れられるjQueryプラグイン「Chardin.js」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter
AjaXplorer プライベートなクラウドを実現できるPHPで書かれたファイルマネージャ「AjaXplorer」。 次のようなリッチなUIに加えて、デスクトップからファイルをドラッグ&ドロップでアップできたりする超多機能ファイルマネージャです。 更に、iPhone/Androidアプリが存在していて、そこからファイルの閲覧やアップも可能というところが凄いです iOS, Android用のそれぞれのアプリケーションもダウンロードできます DropBox等もいいのですが、外部サーバに重要なファイルを置くのが気が引けるという場合はこれを使ってみてもよいかもですね 関連エントリ WindowsのエクスプローラそっくりなWEBファイルマネージャ「FileVista」
Maskify Slider demos マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」。 画像をマスクでくりぬいて更にその中身の画像を切り替えられるというものです。 元画像 繰り抜き 繰り抜いたり、重ねたり、応用することで様々なことができそうですね 関連エントリ パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 タッチ可能でレスポンシブなスライダー実装「RoyalSlider」 これは新しい円形のスライダーが実装できる「Tiny Cir
jQuery.Shapeshift ドラッグ&ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」。 最初に一度出して終わりなレイアウトではなくて、ユーザがドラッグ&ドロップでレイアウトを変えられるプラグインです。 ドラッグ中もアニメーションして動きがなかなか面白いです。 関連エントリ Pinterest風のWordPressテーマ集 Twitter,Facebook,YouTube,PinterestのRSSフィードURLまとめ PinterestのPinIt機能実装jQueryプラグイン FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く