[JS]複数の表示サイズごとに異なるイベントが設定できるResponsive Web Design用のスクリプト -Breakpoints.js
Responsive Web Design用に表示サイズの複数のブレイクポイントを定義し、異なるイベントを設定できるjQueryのプラグインを紹介します。 デモページ：幅640pxで表示 デモページで設定されているブレイクポイントは下記の4つです。 1024px 768px 480px 320px [ad#ad-2] Breakpoints.jsの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://xoxco.com/projects/code/b
レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」:phpspot開発日誌
ResponsiveSlides.js Responsive jQuery slideshow レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 画面サイズが変わっても問題なく動作するレスポンシブなスライドショー実装が可能です サイズは１KBぐらいでマークアップも超シンプルに記述できます ブラウザサイズを変更しても問題なし 今後はこうしたライブラリもレスポンシブ対応必須となっていきそうですね 関連エントリ ３ステップではじめるレスポンシブWEBデザイン 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 ファイルアップロード関連のjQueryプラグイン１０
超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」:phpspot開発日誌
Craftyslide - A tiny jQuery slideshow plugin 超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」 スライダーといえば多機能なものも多いですが、逆にそんな機能いらないよという場合も多かったりします 機能に比例してスクリプトサイズは上がるのでできるだけ軽いものがいいという場合にこちらはよいかもしれません。 マークアップは単にul li リストに画像を並べているだけでシンプルで綺麗 あとは1行jQueryプラグインで初期化するだけです。 アニメーションが気に入らない場合も自分でちょこっとカスタマイズすればよさそうですね 関連エントリ jQueryベースの画像スライダー３０まとめ 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 Apple.comの新スライダーエフェクトを
[JS]ドラッグで移動も可能なモーダルウインドウを作成する軽量スクリプト -Simple Modal
アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modal [ad#ad-2] Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コールバック関数を備えています。 画像や動画、AJAXコンテンツにも対応しています。 Simple Modalのデモ デモではSimple Modalのさまざまな実装例があります。
jQueryの必要なところだけを取り出せる「jQuip」:phpspot開発日誌
jQuip - jQuery in parts :: Builder jQueryの必要なところだけを取り出せる「jQuip」。 ajaxの機能だけを使いたいのに、全部インクルードしちゃうのは回線のムダでパフォーマンスにも影響しますね。 ということでajaxの機能だけとかcssの機能だけといった風にチェックボックスでチェックすればコードをWEB上で取得できてそのままコピペで使えるというものです。 サイト上でminifyしたり逆も可能です。 いらない機能は読み込みたくないものですがこれはナイスですね 関連エントリ 円形で回転するタイマーを実装できるjQueryサンプル Twitter OAuth認証をポップアップで行うjQueryプラグイン 良い感じで動作するニュースティッカー実装jQueryサンプル
[JS]jQueryのプラグイン33 1選 -2011年10・11月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 FlexSlider シンプルながら高性能でセマンティックなマークアップのスライダー。 Slidorion 画像スライダーとアコーデ
ドラッグで全体を移動できる超オシャレなイメージギャラリー実装プログラム:phpspot開発日誌
Draggable Image Boxes Grid | Codrops ドラッグで全体を移動できる超オシャレなイメージギャラリー実装プログラムのダウンロードができます。 Flashを使わずにここまで出来るのは素晴らしい限り。画像をクリックした後のアニメーションも良い感じです。 デモページ ギャラリーサイトをやるなら、これでやってみたいと思ってしまうようなハイクオリティなギャラリープログラムでした。 チュートリアル形式でソースコードの解説も行われているので勉強にもなります 関連エントリ PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ 上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル
[JS]ページ上部にアニメーションでスライド表示するパネルを手軽に実装できるスクリプト -Notification
2秒後に自動で閉じるデモ [ad#ad-2] Notificationの実装 外部ファイル 「jquery.js」と当スクリプト、パネル用のスタイルシートを外部ファイルとして指定します。 <script src="jquery.js"></script> <script src="js/jquery_notification_v.1.js"></script> <link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/> JavaScript showNotification(params); 「params」には「message：表示するメッセージ」「type：パネルのタイプ」を記述します。 showNotification({ message: "This is a sample Success
タブやスクロール、ツールチップなど、Webサイトで良く見かける機能を1つのファイルで実装可能にする国産jQueryプラグイン・Laquu.JS - かちびと.net
たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり、シンプルなフレームワークとしても良いかもしれません。 以前ご紹介したsimplelibと同様にパッケージ化されているので選択肢が増えた印象です。 シンプルで装飾も自由に出来るのでなかなか汎用的ではないかなと思います。ライセンスもMITなのはありがたいですね。 備わっている機能 機能はこんな感じ。どれも良く探している機能じゃないかなと思いますが、これらの機能を1つのjsファイルで使うことが出来る、
[JS]幅指定の単位にパーセント(%)が使えるコンテンツスライダーのスクリプト -Dynamic Carousel
コンテンツの幅指定の単位にパーセント(width:100%;)が使える、レスポンシブ レイアウト対応のコンテンツスライダーのjQueryのプラグインを紹介します。 Dynamic Carousel デモページ [ad#ad-2] Dynamic Carouselのデモ デモではページネーションが3タイプ用意されており、それぞれコンテンツのwidthが%で実装されています。 ※ページネーションはHTML+CSSで自由に配置できます。 デモページ：ページネーション左上 Dynamic Carouselの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"><
スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」:phpspot開発日誌
スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」 2011年08月18日- Smart sticky floating box | jQuery Plugins スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」。 スクロールするとアニメーションでついてくるサイドバー。いろんなところでよく見ますが、実装の仕方によっては酔っちゃったりかえってユーザ利便性をそこないかねないUIですが、常にサイドにあることで便利に使えるという目的で設置されているものです。 こういうUIを実装する際に使えるのがこのプラグインで、位置移動の際のアニメーション方法が多数選べるだけでなく、遅延やアニメーションの速度が自由に設定できます。 デモページで動作確
jQuery Clip - jQueryのプラグインをまとめました。
jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。
[JS]省スペースに大量のコンテンツをスクロール表示するスクリプト -News Scroller
少ないスペースでも、大量のコンテンツをアニメーションの自動スクロールで表示するjQueryのプラグインを紹介します。 jQuery Tutorial: Building a jQuery Scroller デモページ デモでは、リスト要素で実装されたテキストが自動スクロールで表示され、マウスのカーソルをそのエリアに重ねるとスクロールが停止します。 [ad#ad-2] 実装方法 実装のイメージです。 開始時（図：左）は最初のコンテンツの上の空のスペースをセットし、終了時（図：右）には最後のコンテンツの下にも同様に空のスペースをセットし、ループするようにします。 また、このボックスにはデフォルトのスクロールバーを表示しないようにします。 HTML スクロールで表示するコンテンツはリスト要素を使います。 <div class="newsScroller" id="newsScroll"> <ul
iOSのシェイクイベントを取得できるjQueryプラグイン「gShake」:phpspot開発日誌
Attach a function to iOS’s shake ? gShake | Webification iOSのシェイクイベントを取得できるjQueryプラグイン「gShake」。 このプラグインを使うことで、iPhoneをシェイクした際にブラウザ上でイベントを起こして処理を行うことができるみたいです。 iOS4.2以降で動作するそうです。 実装にはライブラリを読み込んで次のようにコールバックを設定するだけのようです。 動きなどは検証していないのですが、HTML5ベースでアプリケーションを作るぜ、という場合に便利に使うことができるかも。 関連エントリ スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 レイアウトに関する強力なjQ
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
Handcrafted leather goods, made in Italy and rooted in Nashville.
Sign up for 15% off first your purchase Be notified of sales, event invites and new products.
[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス
滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion - A Horizontal Accordion Plugin for jQuery 上記ページのスライドは、跳ね返るバウンスのアニメーションになっています。 [ad#ad-2] zAccordionのデモ デモでは、最小限の機能を備えたものから、最大限に拡張したもの、ちょっと面白いものまでが揃っています。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 <ul id="featured"> <li> <image src="/im
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」:phpspot開発日誌
上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」 2011年06月07日- jQuery Slick Plugin ? Examples Design Chemical Lab 上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」。 最近色々なサイトで実装されているアレを実装するためのｊQueryプラグインです。 目立たない程度にページの脇に表示されており、クリックするとコンテンツ表示します アニメーションしながらメニュー表示。常に表示しているよりも、使用頻度が少ないようなケースにおいてはメニューは隠しておいたほうがよいこともありそう 使い方も次のように直感的に簡単に使えるようになっています 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryだけでURLをパースするプラグイン「jQuery-URL-Parser」 | Web活メモ帳
