[JS]追従するフロートパネルを一行のスクリプトで設置できる -Portamento
スクロール操作に追従して定位置に表示されるフロートパネルを簡単な記述で設置できるjQueryのプラグインを紹介します。 Portamento - easy slidingfloating panels in jQuery [ad#ad-2] Portamentoの実装 実装は非常に簡単です。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="portamento.js"></script> HTML フロートさせるパネルをdiv要素で実装します。 <div id="panel">パネル</div> JavaScript jQueryのセレクタでパネルを指定
画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」:phpspot開発日誌
Diapo | a free jQuery slideshow by Pixedelic 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」。 様々な切り替えエフェクトがあって、画像と共に動きも楽しむことができます。 キャプションのアニメーションもクールで、ボタンを設置できたりもします。 Youtube動画の埋め込みも可能です。 あとどうやっているのか不明ですが、Youtubeの動画なんかも次のようにスライドショーさせることができてます。 単に写真を配置するよりもこうしたものを使うほうがよりよく写真を見てもらうことができるのかも。 インデックスもついていて、カーソルを合わせるとツールチップでサムネイルが表示されるなどのこだわりも見られます。 関連エントリ 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 迫力あるフルスクリーンの背景スライ
階層構造が作れるテーブルを実現できるjQueryプラグイン「treeTable」:phpspot開発日誌
jQuery treeTable Plugin Documentation 階層構造が作れるテーブルを実現できるjQueryプラグイン「treeTable」 次のようなエクスプローラ風の階層を持ったテーブルを作ることができます。 カラムも別れており、それぞれ情報を表示でき、階層の折りたたみもできます。 テーブルを決められたルールに従って定義したら、$(element).treeTable();として初期化するだけです。 シンプルですがなかなか使えそうです 関連エントリ ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」 縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
jQueryでスマホサイト向けに画像サイズを縮小する方法
jQueryでスマホサイト向けに画像サイズを縮小する方法を紹介します。 １．サンプル 次のようなPCサイト用のページがあります。この場合、Movable Typeでページを出力しています。ページで使っている記事内の画像サイズは幅470pxです。 このページをスマホサイト向けに別のページを作り、画像サイズを縮小して表示します。画像サイズは幅280pxに縮小しています。 ２．カスタマイズ サイズを変更するには、下記のスクリプトをページ内にあるhead終了タグの直前に追加します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(){ $('img').each(functio
定番機能をまとめて提供してくれるjQueryプラグインまとめ | バシャログ。
ゲームボーイアドバンスの名作「カルチョビット」が3DSで出ると聞いてテンションあがってきたminamiです。 jQuery便利ですよね。さらにその便利なjQueryを使ってコーディング時の定番機能を提供してくれているライブラリがたくさんあるので集めてみました。 Laquu.js http://laquu.com/ 注目の最新プラグインです。「HTMLコーディング作業量を極力減らすためのjQueryプラグイン」ということで、 基本的な機能もさることながら、ピックメニュー、タブ、ツールチップ、ティッカーといった、よく使うけど意外と手間のかかるUIが一つのプラグインでまかなえてしまうのがポイント高いです。個人的にはコナミコマンドが実装されてるのが熱いです！ 対応するjQueryのバージョンは1.5以上です。 simplelib.js http://lab.starryworks.jp/js/si
タブやスクロール、ツールチップなど、Webサイトで良く見かける機能を1つのファイルで実装可能にする国産jQueryプラグイン・Laquu.JS - かちびと.net
たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり、シンプルなフレームワークとしても良いかもしれません。 以前ご紹介したsimplelibと同様にパッケージ化されているので選択肢が増えた印象です。 シンプルで装飾も自由に出来るのでなかなか汎用的ではないかなと思います。ライセンスもMITなのはありがたいですね。 備わっている機能 機能はこんな感じ。どれも良く探している機能じゃないかなと思いますが、これらの機能を1つのjsファイルで使うことが出来る、
会社ロゴマーク デザインアーカイブ
Captcha security check laquu.com is for sale Please prove you're not a robot View Price Processing
ページ幅に応じてYoutube動画などを自動リサイズしてくれるjQueryプラグイン「FitVids.js」:phpspot開発日誌
ページ幅に応じてYoutube動画などを自動リサイズしてくれるjQueryプラグイン「FitVids.js」 2011年09月13日- FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds. ページ幅に応じてYoutube動画などを自動リサイズしてくれるjQueryプラグイン「FitVids.js」 通常、リキッドなレイアウトではテキストは折り返されてもビデオは縮小されません。先日FitTextというソリューションを紹介しましたが、これはテキストと画像のみというものでした。 FitVids.jsを組み合わせることで、動画もページ幅に応じてリサイズが可能 ブラウザを縮小で動画も縮小 ソースを見ると、object, embedや iframe srcの vimeo や youtube
複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」:phpspot開発日誌
jQuery.Smart3D Info for Coders 複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」 マウス位置に応じて画像をずらせて奥行きを表現できます。 実装方法が簡単で、ul以下にliとimgタグを並べて初期化するだけというものです。マークアップ的にあんまりよろしくないのかもしれませんが、こうしたUIが必要なときに手軽に実装できます。 単なる画像よりも、こうしたインタラクティブな要素を入れるとより注目を集められそうですね 関連エントリ 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 ページの要素を3D化できる面白jQueryプラグイン「3Dify」 次世代のイメージマップを実現できるjQueryプラグイン「ImageMapster」
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
jQuery で ;(function () ...と、セミコロンで始めることがあるのはなぜか - わからん
追記 たくさん反響があって驚きました。念の為書いておくと、私はこの記事で仕組みを解説しただけで、このようなノウハウに賛成も反対もしていません。追記はここまで。 azu さんのつぶやきで知った、Dangers of anonymous function closures が、例がよいのに説明が少ないので、ここで丁寧に解説します。なぜ、 jQuery で ;(function () ...とセミコロンで始めるコードがあるのかがわかります。 次のサンプルの実行結果を想像して下さい。 var foo = function(bar) { console.log("foo"); return bar; } (function(){ console.log("bar") })(); 結果は "foo bar" を印字します。多くの場合、これは意図しない挙動だと思います。"bar" だけだと思いませんか。
ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」:phpspot開発日誌
ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」 2011年08月30日- jQuery browserSizr | jQuery Plugins ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」。 スマートフォンや色々な解像度のPCがあるご時世ですが、ブラウザのサイズに応じてコンテナのclass名を付け替えてくれるjQueryプラグインのご紹介です。 クラス名が変わることによってデザインをCSSで自由に切り替えることが可能です。 スマートフォンにも対応しているようです。自分で作っちゃっても全く問題なさそうな機能ではありますが、スクリプティングがめんどくさいという方はこれを使っちゃったり参考にしてもよさそう。 1024ピクセル以上の場合(Chromeのデベロッパーツールでみて
ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル:phpspot開発日誌
Circular Content Carousel with jQuery | Codrops ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル。 そもそものデザインもいいのですが、次のようなコンテンツを左右にスライドできる（ホイールでもOK)UIを作ることが可能です。 「more」をクリックすればそのまま詳細がアニメーションで広がります サンプルプログラムのダウンロードが可能なので、ダウンロードしてカスタマイズして使うだけでも有用です。 関連エントリ IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」
ECサイトなどで使えそうな360度ズーム機能を実装するjQueryプラグイン「AJAX-ZOOM」:phpspot開発日誌
ECサイトなどで使えそうな360度ズーム機能を実装するjQueryプラグイン「AJAX-ZOOM」 2011年08月24日- AJAX-ZOOM jQuery Image Zoom Viewer & Pan Gallery, PHP - Javascript 360 Spin & Zoom Rotate Fullscreen ECサイトなどで使えそうな360度ズーム機能を実装するjQueryプラグイン「AJAX-ZOOM」。 商品なんかを360度回転させながら詳細を確認するみたいなUIが作れます。最初に画像を一気にダウンロードする必要はなくて、ajaxベースなのも特徴です 大きな画面で見れるようにフルスクリーンモードなんかがついたりして凝った作りになっています 以下は回転させて別のアングルでズームしてみたところ ３Dだけではなくて、２Dの大きな画像にも適用することができるみたいです 用途に
これは使いやすい、HTML5+jQueryのプレゼンテーション用ツール -Deck JS
当サイトでもいくつか紹介したHTMLベースのプレゼンテーションツールですが、これ一番いいかもというのがリリースされたので紹介します。
今見ている場所が分かりやすいヘッダー固定のjQuery＆CSSテクニック:phpspot開発日誌
Persistent Headers | CSS-Tricks 今見ている場所が分かりやすいヘッダー固定のjQuery＆CSSテクニック。 文書は表などの長さが長くなってくると今どこを見ているかわかりづらいようなケースがありますが、このテクニックを使えば、今読んでいるパートがなんなのかをページの上部に表示することができて分かりやすいです。テーブルヘッダーなんかも上部固定できます 固定したい部分はjqueryのセレクタで指定できるため、利用も簡単です 関連エントリ テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 CSS3のよく使いそうな１０個のテクニックのまとめ 使える.htaccessテクニック１０個
スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ:phpspot開発日誌
8 Best jQuery Mobile Plugins | ZoomZum スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインがまとまっていましたのでご紹介。 １から作るとかなり大変そうな機能もライブラリで瞬間的に実装できます。一通りチェックした上でご紹介。 Drag And Scale For IOS ブロック要素をピンチイン、アウトによって拡大、回転させることも可能です。これでiPhone向けのWEBサイトといってもアプリのような自由度が得られます（デモ）。 こんなことできるんっ、という声が出てしまうかも（Androidはドラッグのみ） jQuery Mobile Photo Album リッチなフォトアルバム実装が可能 Jquery Mobile Device Drag And Drop 要素のドラッグ＆ドロップが可能 Jquery Swipe スワイプイベン
エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、１つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]jQueryのプラグイン33+1選 -2011年8月