ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 2012年02月13日- Page Scroller: A Simple Page Scrolling Plugin ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」。 ページ内を上や下に移動できるだけではなく、ページ内のマークアップを読み込んでナビゲーションを作ってくれた上でスクロールできたりもします jQueryプラグインなので、$('#main').pageScroller(); みたいに呼ぶだけです ページの左サイドにナビゲーションを表示する例 綺麗なスキンがかぶって表示されます 上下矢印のナビゲーションも可能 サイドではなく、ページトップにナビゲーションを設定することも可能 右サイドにも移動可能 なかなか便利で使えそうですね。１ページに沢山の情

50 Best jQuery Carousel Roundup - tripwire magazine 高機能なカルーセルを実装するjQueryプラグイン５０個がまとまっています。 最近色々なところでカルーセルがチラホラ見られるようになって、需要がそれなりにあるんだなと思っていますが、ライブラリそれぞれに特徴やクセがあるため、自分の使いやすいものを使いたいですね。 そういった際に参考にできるまとめではないかと思いました。 関連エントリ コンテンツの折りたたみを楽々実装できるjQueryプラグイン「jQuery Collapse」 スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」

Slider.js: Slideshow with jQuery, CSS Transitions and Canvas - example with Flickr HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 スライドショーライブラリは色々ありますが、Slider.jsはCSS3やCanvasをフルに活用したライブラリとなります CSS3を使った画像切替の効果が豊富に用意されているのが特徴です。 ページ番号、送る、戻るといったナビゲーションの表示方法も色々と変えられるようです APIのところを見ればわかりますが使い方が超簡単でコードもシンプルにかけます。 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 CSS3を使った超カッコい

Slider.js is an easy-to-use customizable Javascript library to create image slideshows. It relies on the power of CSS Transitions to perform awesome and efficient effects. Slider.js can optionally uses HTML5 Canvas to perform some non trivial transitions.Slider.js v1.1-beta: Slideshow with jQuery, CSS Transitions and Canvas Slider.js is an easy-to-use customizable Javascript library to create imag

ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」 2011年08月30日- jQuery browserSizr | jQuery Plugins ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」。 スマートフォンや色々な解像度のPCがあるご時世ですが、ブラウザのサイズに応じてコンテナのclass名を付け替えてくれるjQueryプラグインのご紹介です。 クラス名が変わることによってデザインをCSSで自由に切り替えることが可能です。 スマートフォンにも対応しているようです。自分で作っちゃっても全く問題なさそうな機能ではありますが、スクリプティングがめんどくさいという方はこれを使っちゃったり参考にしてもよさそう。 1024ピクセル以上の場合(Chromeのデベロッパーツールでみて

スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」 2011年08月18日- Smart sticky floating box | jQuery Plugins スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」。 スクロールするとアニメーションでついてくるサイドバー。いろんなところでよく見ますが、実装の仕方によっては酔っちゃったりかえってユーザ利便性をそこないかねないUIですが、常にサイドにあることで便利に使えるという目的で設置されているものです。 こういうUIを実装する際に使えるのがこのプラグインで、位置移動の際のアニメーション方法が多数選べるだけでなく、遅延やアニメーションの速度が自由に設定できます。 デモページで動作確

Portfolio Image Navigation with jQuery | Codrops 上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル 通常ギャラリーというと左右の矢印がついているだけですが、今回紹介するものは上下左右にナビゲーションさせるというものです。 ページ下部にはナビゲーションが付いており、こちらをクリックしても画像が見れます。 上下の位置関係による意味付けをギャラリーにつけることが可能 デモはこちら 関連エントリ PHPソース１個で実現されるクールなWEBギャラリー実装プログラム「Pagemap ImageWall」 立体感がいい感じの３Dギャラリー作成JSチュートリアル CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 CSS3をフル活用した立体的な画像ギャラリー作成デモ

WebODF OpenOffice等の文書をWEBで表示するJSライブラリ「WebODF」 ODFというXMLベースのフォーマットがあり、こちらをブラウザ上で表示できます。 OpenOfficeで作ったドキュメントをUPしてブラウザ上でそれなりに綺麗に見せたいという場合に使えそうですね。 デモはこちら ドキュメントのズーミング機能なども付いているようです 関連エントリ Excelの2007/2010バージョンも読み書きできるPHPエクステンション WEBサービスで使えるPEAR以外で有名なPHPモジュール総まとめ

jQuery Notification Menu | Codebase Hero 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 次のようなメッセージ何件あるよ〜みたいな通知件数つきのメニューが実装できます。スタイリングがクールなのがいいですね。 一昔前ならどうやって実装するんだろうというこのメニューですが、WEBの進歩を感じますね 関連エントリ ブロックごとに独自の右クリックメニューが実装できるjQueryプラグイン「contextMenu」 Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン 画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」 かなりクールなjQueryのメニュープラグインやチュートリアル集

簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」 2011年06月15日- jLinkPreview 簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」のご紹介。 リンクを合わせたときにリンク先のイメージが分かるといいですが、それをjQueryプラグインの形で、簡単に実装できます。 サムネイル画像にはwimg.caというサービスが使われています。 サムネイル表示の例 使い方は以下のように初期化すればよいみたい。 画像のプレロードや、サムネイルサイズ（幅・高さ）、フェードや背景色など自在にカスタマイズできますね プラグインもそこまで大きくないため、サムネイルのプロバイダを変更するのもソースをちょこちょこっと変えれば対応できます。 関連エントリ テキストシャドウを自在にアニメーションさせられる

jQuery Marquee Animation Plugin Preview - CodeCanyon 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」。 ホームページをつくりはじめた時には誰もが使ったマーキー。覚えていくにつれ、ほとんど使われないかわいそうなマーキー。 そんなマーキーもjQueryで超かっこ良く、まるで映画のプロモーション動画に使われるようなエフェクトに生まれ変わったようです。 生まれ変わったマーキーを見てみよう 実装は超簡単！ <script language="javascript"> $(document).ready(function() { $('.marquee').fMarquee({width: 960, height: 100}); // サイズをオプション指定 }); </script> <!-- 内容はdivに入

Animated Scroll to Top ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル。 ページの上の方にいる場合は必要ないかもしれないボタン。下に行くにつれ表示されることで上に戻れることが分かりやすく、上にいるときは邪魔にならないという使いやすいボタンが作れますね。 jQueryにて実装するチュートリアルとなっており、サンプルのダウンロードも出来るのでいざ実装する際に参考にできそう。 デモページ 最近WEBを巡回していると散見するUIですね。 関連エントリ 指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」 スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」

Professor Cloud JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ。 枠内を画像が３Dで回転します。通常こうしたUIを作るにはFlashが多いですが、JavaScriptでやっちゃってます。 クリックすればLightBoxが開きます。 関連エントリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」

jQuery.popeye 2.0 | an inline lightbox alternative インラインでその場でLightboxできる「jQuery.popeye」というスクリプトがあるみたいです。 画面をグレーにすることなくその場で画像を送れるので、地味ではありますがこういう使い方もいいなという効果を得られます。 動きとしては記事中にある、一見普通の画像。 カーソルを合わせるとナビゲーションが現れ、画像のスライドが表示されます。 微妙に、写真の下にはキャプションが表示され、写真の説明が見れます。 ありそうで、なかったですね。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 画像やページをLightBox風に表示できるThickbox 表示法が新しくセクシーなLightBox「SexyLightBox」

Slot Machine Tabs | CSS-Tricks タブ切り替えでコンテンツがスロットマシンっぽく切り替わるサンプル。 普通はタブをクリックするとパッと画面が切り替わりますが、このサンプルは面白くて内容がアニメーションしながらスロットマシン風にカッコよく切り替わります。 スタイリッシュ度を上げたい方は覚えておくとよいかも。 タブだけじゃなくて、画面切り替えの際にこういうアニメーションしたらそれはそれでカッコ良さそうですね。 関連エントリ わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」

Coin Slider: jQuery Image Slider Plugin with Unique Effects 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」。 画像の切替を、タイル状に切り替えたりすることができるみたいです。 jQueryプラグインなので、$(elemen).coinslider メソッドにオプション渡せば動くようになっています。 少し面白い動きを付けたい、という場合にも簡単に実装できるので覚えておくとよいかもしれませんね。 Flashで同じようにやろうとすると１からだと結構面倒そうな気がしますが、このjQueryプラグインを使うことで一瞬で実装できます。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 表示法が新しくセクシーなLightBox「SexyLightBox」

写真枠をドラッグで写真を３Dっぽく回転させられるjQueryプラグイン「jQuery Reel」 2010年03月31日- jQuery Reel Plugin 写真枠をドラッグで写真を３Dっぽく回転させられるjQueryプラグイン「jQuery Reel」が公開されています。 マウスで写真をドラッグします くるっと回転します。 マウスドラッグだけでなく、マウスホイールを回転させても同じ効果が得られます。 ３６０度のパノラマ写真を回転させるようなことも出来るみたいです。 商品の詳細についてより訪問者に分かりやすく伝えるとか、３６０度のパノラマ写真をみせる際のUIに使えそうですね。

Free javascript date picker - popup date picker for websites and web apps - javascriptcalendar.org 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」が公開されています。 次のように可愛いUIがいい感じです。 カレンダーピッカーのデザインもいいものを使いたい際の１つの選択肢として覚えておくとよいかも 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」

Grid Accordion with jQuery | CSS-Tricks グリッドアコーディオンを新しい情報表示の仕方をjQueryで実現しているデモとサンプルコードが公開されています。 複数のカラムから１列が構成されていて、列の特定カラムをクリックするとそのカラムが拡大しつつ、列自体も拡大されます。 動き自体も面白いのですが、比較テーブルなんかで便利に使えるかもしれませんね。 にゅっ、とjQueryでアニメーションする部分もいいですね。 関連エントリ jQueryでアコーディオン作成のチュートリアル JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」