最近５〜６年分の人気のある jQueryプラグインを，年別に全て把握するまとめ。定番プラグインの日本語解説付きページへのリンク集 - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ さいきん５〜６年で人気のある jQueryプラグインを， 年ごとに全て把握するためのまとめ。 毎年，「今年のお勧めプラグイン」が ランキング記事として幾つか発表される。 それらの記事へのリンク集。 目を通しておくだけで，最新のjQuery事情が把握できるし， Webデザインの引き出しを増やせる。 ２０１５年 ２０１４年 ２０１３年 ２０１２年 ２０１１年 ２０１０年 ※↑ もくじジェネレータ で自動生成 ２０１５年 [jQuery]WEB制作でよく使うjQueryプラグイン [2015年版] | EMiAC-Works http://emiac-works.com/coding/jquery/... 2015/04/16 WEB制作でよく使うjQueryプラグインをご紹介。色々使ってきた中で今のものに落ちついてきた。定番と呼ばれるものが多い ス
要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」:phpspot開発日誌
Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラウザサイズによってはせっかくカッコよく設定した背景画像が台無しになることがこれまでもありましたが、このプラグインでもうそういったことはなくなりそう。 デモページ 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carou
[JS]ビフォーアフターの2枚の画像を分かりやすく比較できるようにするスクリプト -TwentyTwenty
2つの画像を重ねて、中央のバーをスライドしてビフォーアフターを切り替えて表示することで、簡単に比較できるようにするjQueryのプラグインを紹介します。 ↓はただのキャプチャ画像なので動作しません。 TwentyTwenty TwentyTwenty -GitHub TwentyTwentyのデモ TwentyTwentyの使い方 TwentyTwentyのデモ デモはスクリプトのページに大きく掲載されています。 モダンブラウザをはじめ、スマフォ・タブレットでご覧ください。IEは8+で。 オプションでオーバーレイのパネルを設定しています。 TwentyTwentyの使い方 Step 1: 外部ファイル 「jquery.js」とプラグイン「event.move.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript"
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script> </body> Step 2: HTML スクロールしても上部に固定配置にする
[JS]スライドさせるだけでなくもう一手間加えて、ぐぐぐっとかっこよくナビを表示するスクリプト -Box Lid Menu
Toybox Box Lid Menuの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを</body>の上あたりに外部ファイルとして記述します。 <head> ... <link rel='stylesheet' type='text/css' href='css/box-lid.css'> </head> <body> ... ... <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <script src='js/jquery.box-lid.min.js'></script> </body> Step 2: HTML 左のナビゲーションとコンテンツをdiv要素などで配置し、並列の構造で実装します。 <div class='box-lid-menu'> <div cl
スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」:phpspot開発日誌
ScrollIt.js by @ChrisPolis スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」 ↑↓キーでページがスクロールし、かつナビゲーションメニューも備えたようなページが作れます 何らかの製品等の紹介サイトを１ページでサクっと作りたい場合に使いやすく、分かりやすいページが作れて便利かも ページごとダイナミックに切り替わるあたりもクールでモダン。 関連エントリ 縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」 アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」 スクロール
スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」:phpspot開発日誌
jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin. スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 次のようにスマホでも階層を開閉できるレスポンシブなメニューが実装できます。デザインもいい感じ。 PCでも横長に違和感なく表示することが可能 スマホサイトを作る上では覚えておいて損はなさそう 関連エントリ 新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」 アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」 レスポンシブなiPhoneのサイドメニューっ
[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。
シンプルで使い方も簡単！垂直ティッカーを実装できるjQueryプラグイン「vTicker」 – bl6.jp
シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイン「vTicker」をご紹介します。ulのli要素に表示させるテキストを記述していき、vTickerをセットアップするだけです。スペースを有効活用したい時や、ちょっとした導線をつくりたい時によさそうですね。 [ads_center] このようにli要素に表示させたいテキストを記述していきます。ティッカーはli要素ごとに切り替わっていきます。 <div id="sample"> <ul> <li>サンプルテキスト1</li> <li>サンプルテキスト2</li> <li>サンプルテキスト3</li> </ul> </div> あとはvTickerをセットするだけです。 $(function() { $('#sample').vTicker(); }); オプションも色々あり、スピードやアイテムを表示させる数を指定することも
[JS]スクロールした際に見出しや画像やエリアなどが見切れるのを自動補正するスクリプト -Scrollsnap
ユーザーがページをスクロールした時、見出しや画像が見切れてしまう、ストライプの背景で違うカラーが少し見えてしまうなど、ちょっとだけスクロール位置がうまくない時に自動で補正するjQueryのプラグインを紹介します。 Scrollsnap Scrollsnapの特徴 Scrollsnapのデモ Scrollsnapの使い方 Scrollsnapの特徴 Srollsnapはスクロールでのユーザエクスペリエンスを強化するjQueryのプラグインで、ページ内の指定したポイントの上下でスクロール移動が止まってしまったら、自動的にちょうどいい位置にスナップさせます。 スナップ時のポイントはclassで設定可なので、テキスト・見出し・画像をはじめ、div要素やarticle要素などにも設定できます。 対応ブラウザ デスクトップ用の最新のブラウザをはじめ、IE9、スマフォ用のSafariにも対応しています。
アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」:phpspot開発日誌
jQuery.mmenu slick app look-alike sliding menus for your mobile website アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」 この手のライブラリというかプラグインは色々と出ていそうですが、１つの選択肢として知っておくとよいのかも。 $("#nav").mmenu(); で簡単にメニューが初期化でき、オプションも豊富です 関連エントリ レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」 レスポンシブでクールなドロップダウンメニュー実装例 垂直アイコンメニュー実装デモ＆サ
レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」:phpspot開発日誌
jQuery Navobile by Made by Made レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」 レスポンシブ関連のライブラリは色々でてますが、これは便利かも、と思ったプラグイン。 通常のPCモード 幅を狭くするとナビゲーションメニューが現れます クリックでアプリ風のメニューに変身 必要最低限さっくりと入れておくと便利そうなプラグインですね 関連エントリ PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」 スマホ関連のリモートホストのまとめ スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 スマホ・タブレットの判別ができるPHPクラスライブラリ「PHP Mobile Detect」
テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」:phpspot開発日誌
Sieve jQuery Plugin テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」。 テーブル行数が多いと探すのが大変だったりしますが、このプラグインでインクリメンタル検索で表示要素を絞り込むことができるようになります。 地味に便利で簡単に実装できるので覚えておくとよさそう 関連エントリ HTMLのあらゆるエレメントに注釈を入れられるjQueryプラグイン「Chardin.js」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter
PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」:phpspot開発日誌
Swipeshow: the unassuming touch-enabled slideshow JavaScript library PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」 次のようなデザインで、スワイプで画像が遅れるスライドショーが実装できます 画像だけでなく、HTMLを埋め込むことも可能。主にスマホ用として便利に使えそうです。自動再生等必要な機能は揃っています 選択肢の一つとして考えても良いかも 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」
スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」 – bl6.jp
タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装することができるjQueryプラグイン「Swipeshow」をご紹介します。jQuery 1.8が必要とのこと。モバイルからのアクセスが増えてくる中、こういったスワイプにも対応しているプラグインはこれからますます重要になってきそうですね。 [ads_center] 使い方 まずはHTMLマークアップから。以下のようにシンプルに記述します。 <div class="swipeshow"> <ul class="slides"> <li class="slide"> ... </il> <li class="slide"> ... </li> <li class="slide"> ... </li> </ul> </div> CSSでスライドショーのサイズを指定しておきます。 .swipeshow { width: 200px;
画像クリックでその場で色々な形でズームできるjQueryプラグイン「Nivo Zoom」:phpspot開発日誌
Nivo Zoom - jQuery Image Zoomer 画像クリックでその場で色々な形でズームできるjQueryプラグイン「Nivo Zoom」 5種類のズームタイプ、HTMLキャプションを画像に重ねたりできる画像ズームプラグインです 定番のズームプラグインも既にありますが、比較検討の際に検証してみるのもいいかもですね。 関連エントリ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
DIVをマーキーっぽくエンドレスにスクロールさせられるjQueryプラグイン:phpspot開発日誌
jQuery Endless Div Scroll by Codicode (Demo Page) DIVをマーキーっぽくエンドレスにスクロールさせられるjQueryプラグイン マーキーのように指定DIVを横にスクロールさせられるプラグインです。 スピードの変更や、マウスオーバーで停止させたりといったことが可能みたい。 実装は簡単。 マーキー復活のお知らせ、でした。 関連エントリ アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」 アニメーションでコンテンツをより効果的にみせるためのjQueryプラグイン集 CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメGIFでもHTML
Windowサイズに応じて動的にブロック要素を配置！Isotopeを簡単実装。 - フロントエンドとかPCとかスマホとか
Masonryレイアウトを実現するJSライブラリ、Isotopeを超簡単に実装してみよう。 実はいろいろと高機能。でも今回はほんとに基本的だけど感動ものの簡単実装！ まずは、ライブラリをダウンロード Isotope http://isotope.metafizzy.co/ （jquery.isotope.min.js） 一番シンプルな構成として、3つのファイルを同じフォルダに準備します。 テスト用のサンプル、全文掲載です。 index.html <!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <title>Isotope-test</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="http
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
cmmntr.com