サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
jquery-box.com
任意の要素がブラウザ内に現れた時に、イベントハンドラを発生させることができるようになるjQueryプラグイン、inviewをご紹介します。 inviewの入手方法 まずはinviewをGitHubよりダウンロードしてください。 jQuery inview:icon-external-link任意の要素がブラウザ内に現れた時に、イベントハンドラを発生させることができるようになるjQueryプラグイン、inviewをご紹介します。 inviewの入手方法 まずはinviewをGitHubよりダウンロードしてください。 jQuery inview: https://github.com/Formstone/Shifter inviewの導入方法 jQuery本体とjquery.inview.jsをそれぞれ使用したいページで読み込みます。 jQueryプラグインのinviewは、「inview
数が多すぎてどれを使えばいいかわからない jQeuryプラグインをまとめて続けてはや4ヶ月。 世の中にプラグインをまとめた記事は数あれど、 本当の本当に使えるのはどれなんだ!と思っている方も多いのではないでしょうか。 jQueryを探し求めている著者が、 日々のWEB制作業務の中で本当によく使うjQuer数が多すぎてどれを使えばいいかわからない jQeuryプラグインをまとめて続けてはや4ヶ月。 世の中にプラグインをまとめた記事は数あれど、 本当の本当に使えるのはどれなんだ!と思っている方も多いのではないでしょうか。 jQueryを探し求めている著者が、 日々のWEB制作業務の中で本当によく使うjQueryプラグインを激選してまとめました。 スライダープラグインの決定版「FlexSlider 2」 スライダープラグインは、jQueryプラグインの代名詞と言ってもいいかもしれません。
軽量で簡単に導入できるスライドショーを実装できるjQueryプラグイン「skippr」をご紹介します。 「skipprの導入方法 まずはskipprの公式サイトからプラグインをダウンロードしてください。 ページのトップにダウンロードボタンがあります。 skippr:icon-external-link軽量で簡単に導入できるスライドショーを実装できるjQueryプラグイン「skippr」をご紹介します。 「skipprの導入方法 まずはskipprの公式サイトからプラグインをダウンロードしてください。 ページのトップにダウンロードボタンがあります。 skippr: http://iamapioneer.com/plugins/skippr/ jQuery本体とjquery.skippr.min.jsとjquery.skippr.cssをサーバーにアップロードし、プラグインをつかいたいペー
マウスオーバーのあるなしで画像がモザイク表示させるかどうかを変化させるjQueryプラグインマウスオーバーのあるなしで画像がモザイク表示させるかどうかを変化させるjQueryプラグイン pixelate.jsをご紹介します。 デフォルトではモザイク表示されている画像に、マウスオーバーをしたらどんな画像かわかるといった機能を実装することができます。 pixelate.jsの導入方法 まずはpixelate.jsのGitHubからプラグインをダウンロードしてください。 pixelate.js: https://github.com/43081j/pixelate.js jQuery本体とpixelate.jsをサーバーにアップロードし、プラグインをつかいたいページで読み込んでください。 <script src="jquery.js" type="text/javascript"></scr
写真を表示するjQueryプラグインといえば、 jQUeryBoxでも以前取り上げたようにLightboxが有名ですが、(Lightbox:写真を表示するjQueryプラグインといえば、 jQUeryBoxでも以前取り上げたようにLightboxが有名ですが、(Lightbox: http://jquery-box.com/lightbox/) 今回は進化したLightboxとも言われるSuperboxを紹介します。 Superboxをつかうことでgoogle画像検索風のUIを簡単に実装することができます。 レスポンシブデザインにも対応しています。 Superboxの導入方法 まずはSuperboxのGitHubからプラグインをダウンロードしてください。 Superbox: https://github.com/toddmotto/superbox つづいてjQueryとsupe
jQuery定番プラグインまとめサイト jQueryBoxYOUTUBEの動画を背景でフルスクリーンで流す jQueryプラグイン「tubular」 動画を背景としてつかったデザインを見掛けることが多くなりました。 背景に目一杯... 2014年11月15日 写真をミニチュア風にすることができるjQuery プラグイン「tiltShift.js」 驚くほど簡単にミニチュア風の加工エフェクトを写真にかけることができる、jQuer... 2014年11月15日 パノラマ写真を美しく表示するjQueryプラグイン「jQuery Panorama Viewer」 iPhoneでパノラマ写真を撮影することができるようになって久しいですが、なかな... 2014年11月14日
フルスクリーンでスクロールする、全画面表示のページが簡単につくれるjQueryプラグイン「fullPage.js」を紹介します。 言葉で説明するよりもデモを見ていただいたほうが早いと思いますので、まずはデモをご覧ください。 >フルスクリーンでスクロールする、全画面表示のページが簡単につくれるjQueryプラグイン「fullPage.js」を紹介します。 言葉で説明するよりもデモを見ていただいたほうが早いと思いますので、まずはデモをご覧ください。 > デモを見る 紙芝居のようにページごとにコンテンツを見せたいページに向いています。 fullPage.jsの導入方法 まずはfullPage.jsの公式ホームページよりプラグインをダウンロードしてください。 fullPage.js: http://alvarotrigo.com/fullPage/ ダウンロードしたファイルの中から、 jque
動画を背景としてつかったデザインを見掛けることが多くなりました。 背景に目一杯の大きさでYOUTBEの動画を流すことができるjQueryプラグイン「tubular」をご紹介します。 tubularの導入方法 まずはtubularの公式サイトからプラグインをダウンロードしてください。 ページ右上の「Downl動画を背景としてつかったデザインを見掛けることが多くなりました。 背景に目一杯の大きさでYOUTBEの動画を流すことができるjQueryプラグイン「tubular」をご紹介します。 tubularの導入方法 まずはtubularの公式サイトからプラグインをダウンロードしてください。 ページ右上の「Download jQuery tubular on Google Code」からダウンロードページに行くことができます。 tubular: http://www.seanmccambrid
驚くほど簡単にミニチュア風の加工エフェクトを写真にかけることができる、jQuery驚くほど簡単にミニチュア風の加工エフェクトを写真にかけることができる、jQuery プラグイン「tiltShift.js」をご紹介します。 tiltShift.jsの導入方法 まずはtiltShift.jsの公式サイトからプラグインをダウンロードしてください。 tiltShift.js: http://www.noeltock.com/tilt-shift-css3-jquery-plugin/ jQuery本体とtiltShift.jsをサーバーにアップロードし、プラグインをつかいたいページで読み込んでください。 <script src="jquery.js" type="text/javascript"></script> <script src="tiltShift.js" type="text/j
Webページの表示速度は、ページに訪れた人にとってとても重要な体験の指標になります。 ことさら画像の読込が遅いせいで、サイトから離脱する人が増えてしまわないよう、リクエスト数を絞り、画像を遅延読込させましょう。 Lazy Load Plugin for jQueryjQuery定番プラグインまとめサイト jQueryBox > インターフェース > スクロール > 画像をスクロールに応じて遅延読込させるjQueryプラグイン「Lazy Load Plugin… Webページの表示速度は、ページに訪れた人にとってとても重要な体験の指標になります。 ことさら画像の読込が遅いせいで、サイトから離脱する人が増えてしまわないよう、リクエスト数を絞り、画像を遅延読込させましょう。 Lazy Load Plugin for jQuery を使えば、簡単に画像を遅延読込機能を実装することができます。
ページを引き下げることでリロードするUIを、スマートフォンのネイティブアプリでよく見かけますよね。 Webサイトでも引き下げてリロードする機能を簡単に実装できるjQueryプラグイン「Hook.js」を紹介します。 Hook.jsの導入方法 まずはHook.jsのGitHubよりプラグインをダウンロードしてくださ全画面表示の格好いいフルスクロールページをつくれる「fullPage.js」 フルスクリーンでスクロールする、全画面表示のページが簡単につくれるjQueryプラグイン「fullPage.js」を紹介します。 言葉で説明するよりもデモを見ていただいたほうが早いと思いますので、まずはデモをご覧ください […] 直感的な入力UIを簡単に実装できるjQueryプラグイン「jQuery Knob」 ドアノブをひねるような感覚で入力できるUIを簡単につくることができるjQueryプラグイン「j
ドアノブをひねるような感覚で入力できるUIを簡単につくることができるjQueryプラグイン「jQuery Knob」を紹介します。 サークルのをひねるようにスクロールするだけで値を入力することができます。 jQuery Knobの導入方法 まずはjQueryたったこれだけで直感的な入力が可能なUIを実装することができます。 jQuery Knobのオプション jQuery Knobの初期値などのオプション min 最小値を設定することができます。 max 最大値を設定することができます。 angleOffset 円弧をスタートする角度を選択することができます。 angleArc 円弧を表示しておく角度を設定することができます。 stopper falseに設定することで、最小値最大値を超えて操作できるよう設定できる。 readOnly 入力及び操作を許さない。 rotation
スタイリッシュなギャラリーをつくることができるjQueryプラグインのMixItUpを紹介します。 DIYするには中々手間がかかる、フィルター&ソート機能を美しいアニメーションで実装することができます。 MixItUpの導入方法 まずはMixItUpの公式ホームページよりプラグインをダウンロードしてください。スタイリッシュなギャラリーをつくることができるjQueryプラグインのMixItUpを紹介します。 DIYするには中々手間がかかる、フィルター&ソート機能を美しいアニメーションで実装することができます。 MixItUpの導入方法 まずはMixItUpの公式ホームページよりプラグインをダウンロードしてください。 ページ中程のDOUNROAD.ZIPボタンよりダウンロードすることができます。 MixItUp: https://mixitup.kunkalabs.com/ ダウンロード
元祖jQueryプラグインの「Lightbox」について解説します。 写真を大きく、美しく見せる機能を簡単に実装することができるはずです。 Lightboxの導入方法 まずはLightboxの公式ホームページよりプラグインをダウンロードしてください。 Lightbox:icon-external-link元祖jQueryプラグインの「Lightbox」について解説します。 写真を大きく、美しく見せる機能を簡単に実装することができるはずです。 Lightboxの導入方法 まずはLightboxの公式ホームページよりプラグインをダウンロードしてください。 Lightbox: http://lokeshdhakar.com/projects/lightbox2/ jQueryとLightboxのプラグインをサーバーにJSフォルダにアップロードし、読み込んでください。 (JSフォルダがない
「FlexSlider 2」は、数あるjQueryのスライドショーのプラグインの中でも定番なスライドショープラグインです。 その名前からも分かる通り、FlexSliderの進化したバージョンで、とてもオプションも豊富です。 FlexSlider 2の導入方法 まずはFlexSlider「FlexSlider 2」は、数あるjQueryのスライドショーのプラグインの中でも定番なスライドショープラグインです。 その名前からも分かる通り、FlexSliderの進化したバージョンで、とてもオプションも豊富です。 FlexSlider 2の導入方法 まずはFlexSlider 2のホームページからプラグインをダウンロードしてください。 サイトは英語ですが、ダウンロードリンクはすぐにわかるはずです。 FlexSlider 2: http://flexslider.woothemes.com/
「Juicy Slider」は、軽量で優雅なアニメーションエフェクトを実装できるjQueryプラグインです。 Juicy Sliderの導入方法 まずは、Juicy Sliderの公式ホームページよりプラグインをダウンロードしてください。 Juicy Slider:icon-external-link「Juicy Slider」は、軽量で優雅なアニメーションエフェクトを実装できるjQueryプラグインです。 Juicy Sliderの導入方法 まずは、Juicy Sliderの公式ホームページよりプラグインをダウンロードしてください。 Juicy Slider: http://juicyslider.gopagoda.com/ <div id="slider" class="juicyslider"> <ul> <li><img src="image01.jpg"></li> <l
least.jsでできること least.jsはスライド系ではなく、画像をタイル状に並べて表示することができる画像ギャラリー系のjQueryプラグインです。 導入方法 まずはファイルをleast.jsからダウンロードします。 least.js:icon-external-linkleast.jsでできること least.jsはスライド系ではなく、画像をタイル状に並べて表示することができる画像ギャラリー系のjQueryプラグインです。 導入方法 まずはファイルをleast.jsからダウンロードします。 least.js: http://kamilczujowski.github.io/least/ ダウンロードをしたら、ダウンロードしたCSSファイルとJSファイルを読み込みます。 フルスクリーンで表示できる画像ギャラリーjQueryプラグイン「Fotorama.js」 Fotorama.
bxSliderでできること bxSliderは簡単に設置できる、自動再生やフェードインエフェクトなどのカスタマイズもできる、レスポンシブのスライドショーです。 least.jsはスライド系ではなく、画像をタイル状に並べて表示することができる画像ギャラリー系のjQueryプラグインです。 導入方法 まずはbbxSliderでできること bxSliderは簡単に設置できる、自動再生やフェードインエフェクトなどのカスタマイズもできる、レスポンシブのスライドショーです。 least.jsはスライド系ではなく、画像をタイル状に並べて表示することができる画像ギャラリー系のjQueryプラグインです。 導入方法 まずはbxSliderのページへ飛んで、右上のダウンロードボタンからファイルをダウンロードしてください。 bxSlinder: http://bxslider.com/ ダウンロードをしたら
jq-tiles.jsでできること CSS3と組み合わせて、12種類の多種多様なエフェクトで画像ギャラリーをアクティブにすることができます。 導入方法 まずはファイルをGitHubからダウンロードします。 GitHub:icon-external-link{ x : 4, // タイルのx軸の幅、最大20 y : 4, // タイルのy軸の幅、最大20 effect : ‘default’//使用する効果 fade : false, //タイルの効果に加えて、イメージを隠すか random : false, //ランダムにアニメーション効果を発動するか reverse : false, //アニメーションの始点を反対方向にするか backReverse : false, // スライドショーが行われた時に、反転させるか rewind : false, // ある一定の時間で
jquery.cookie.jsを使ってできること cookieを簡単に保存したり、削除したりすることができるようになります。 例えば下記のような機能を実現するために必要なcookieを、簡単に扱えるようになります! サイトのユーザーに入力してもらったメールアドレスを保存する 初回の訪問者にだけ特別な表jquery.cookie.jsを使ってできること cookieを簡単に保存したり、削除したりすることができるようになります。 例えば下記のような機能を実現するために必要なcookieを、簡単に扱えるようになります! サイトのユーザーに入力してもらったメールアドレスを保存する 初回の訪問者にだけ特別な表示をする jquery.cookie.jsの導入方法 jquery.cookie.jsは、GitHubからダウンロードできます。 GitHub: https://github.com/ca
このページを最初にブックマークしてみませんか?
『jQuery定番プラグインまとめサイト jQueryBox』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く