JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。
jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。
ここでは、その他のjQueryプラグインを紹介しています。

背景に線を引いて印象的なサイトに!jQueryプラグイン「Lines.js」サンプル

ちょっとしたアニメーション効果で印象をぐっと良くするためのjQueryプラグイン「animo.js」

時折背景に線を散らしているサイトがありますが、それをjQueryプラグインLines.jsを使って描くことが可能です。 これにより印象的な感じのサイトになるかもしません。

via:Lines.js

ちょっとしたアニメーション効果で印象をぐっと良くするためのjQueryプラグイン「animo.js」サンプル

ちょっとしたアニメーション効果で印象をぐっと良くするためのjQueryプラグイン「animo.js」

要素に少しの動きをつけるだけで人に与える印象を大きく変えることが可能です。 jQueryプラグインのanimo.jsを利用することで手軽に利用できるようになります。

via:animo.js

ローディングの進捗度合いを簡単に円状表示できるjQueryプラグイン「CirclesProgressbar」サンプル

ローディングの進捗度合いを簡単に円状表示できるjQueryプラグイン「CirclesProgressbar」

ローディングの状況を%で表示できるとユーザーのストレスを軽減できます。 jQueryプラグインのCirclesProgressbarを使用すると簡単に円状のプログレスバーを設置できます。

via: CirclesProgressbar

画像をローディングバーに使えるjQueryプラグイン「LoadGoサンプル

画像をローディングバーに使えるjQueryプラグイン「LoadGo

シングルページが増えるにつれ、ローディングの登場機会も増えているように思います。 LoadGoはロゴなどの画像をローディングのプログレスバーに変えてしまうことができます。 これにより印象的で、ブランドイメージも保てるのではないでしょうか。

via: LoadGo

簡単!軽量!多機能!3拍子揃ったタブjQueryプラグイン「TabTab.js」サンプル

簡単!軽量!多機能!3拍子揃ったタブjQueryプラグイン「TabTab.js」

タブを使うケースは多いかと思います。 今回紹介するtabtab.jsは多機能で、面白い動きも付けられる軽量のjQueryプラグインです。

via:tabtab.js

読み込み状況を表示するjQueryプラグイン「DEPreLoad.js」サンプル

サンプルデザインをMacに埋め込んで見せられるjQueryプラグイン「DeviceMock.js」

デザインした、コーディングした、それをMacやiPhoneのウィンドウにはめ込んで見せたい。 そんなことはサイトを作る立場だと、よくあることでしょう。 jQueryプラグインのjquery.devicemock.jsを使用すれば簡単に実現できます。

via:jquery.devicemock.js

読み込み状況を表示するjQueryプラグイン「DEPreLoad.js」サンプル

読み込み状況を表示するjQueryプラグイン「DEPreLoad.js」

昨今縦長のシングルページが増えてきて、読み込みのスピードが気になるような機会もあります。 そんな時は読み込み状況を%で表示してあげるとユーザーのストレスも軽減できるのではないでしょうか。 jQueryプラグインのDePreLoad.jsを利用すると簡単に導入できます

via:DePreLoad.js

年齢認証を簡単にかけられるjQueryプラグイン「AgeCheck.js」サンプル

年齢認証を簡単にかけられるjQueryプラグイン「AgeCheck.js」

お酒のサイトなどでよく見る年齢認証。 これを簡単にjQueryプラグインで実現できるのがAgeCheck.jsです。

via:AgeCheck.js

昔なつかしのコナミコマンドを埋め込めるjQueryプラグイン「egg.js」サンプル

昔なつかしのコナミコマンドを埋め込めるjQueryプラグイン「egg.js」

むかし、ファミコンと呼ばれるゲーム機がありました。 そこでは上上下下右左右左BAとコントローラーを押すと、何かが・・・! っていうコナミコマンドな隠しコマンドるものがありました。 WEBでもこれを実現するため、jQueryプラグインの「egg.js」を使ってみましょう。

via:egg.js

ローディングをオシャレかつ簡単に導入できるjQueryプラグイン「jqueryIntroLoader Plugin」サンプル

ローディングをオシャレかつ簡単に導入できるjQueryプラグイン「jqueryIntroLoader Plugin」

ページを表示した時にローディングを表示させると、ユーザーをイライラさせないこともあります。 jQueryプラグインのjQuery IntroLoaderを使用すると簡単に導入できます。

via:jQuery IntroLoader

いつか役立つ!?スターウォーズぽい星空を背景に描けるjQueryプラグイン「Starfield」サンプル

いつか役立つ!?スターウォーズぽい星空を背景に描けるjQueryプラグイン「Starfield」

完全にネタ系のjQueryプラグインですが、動く星空を敷くことができます。 このjQueryプラグインjQuery Starfieldをいつか使用する時のために頭の片隅においておきましょう。

via:jQuery Starfield

心地よし!フルスクリーンでモーダル表示させるjQueryプラグイン「animatedModal.js」サンプル

心地よし!フルスクリーンでモーダル表示させるjQueryプラグイン「animatedModal.js」

クリックするとより多くの情報が表示されるモーダル。 非常に便利で、デザインがシンプルなページが増えてきてより使用されるようにも感じています。 今回紹介するanimatedModal.jsはCSS3の動きの効果を利用して、心地良い動きをさせられるjQueryプラグインです。

via:animatedModal.js

簡単!軽量!爽快!要素に動きを付けられるJSアニメーションライブラリ「snabbt.js」サンプル

簡単!軽量!爽快!要素に動きを付けられるJSアニメーションライブラリ「snabbt.js」

最近のサイトでは様々な要素に動きが付けられているものが多くなっています。 今回紹介するアニメーションのJavaScriptライブラリsnabbt.jsを利用すると、簡単に導入ができます。。

via:snabbt.js

マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」サンプル

マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」

マウスのカーソルを変えたいなんてことがたまにあるかと思います。 そんな時はAwesome Cursor - a jQuery plugin for using FontAwesome icons as custom CSS cursorsを利用することで、多彩なアイコンに簡単に変更できます。

via:Awesome Cursor

クリックすると画像にテキストをオーバーレイさせられるjQueryプラグイン「purplecoat.js」サンプル

クリックすると画像にテキストをオーバーレイさせられるjQueryプラグイン「purplecoat.js」

クリック時に画像のキャプションなどを表示させるケースもあるのではないでしょうか。 その際にはjQueryプラグインのPurplecoat.jsを利用すると、オーバーレイさせながらオシャレにテキストを表示させられます。

via:Purplecoat.js

カスタマイズ豊富なページトップに戻るボタンを設置できるjQueryプラグイン「jQuery GoUp!」サンプル

カスタマイズ豊富なページトップに戻るボタンを設置できるjQueryプラグイン「jQuery GoUp!」

ページが長くなったらページトップというものを設置するサイトが多いですね。
jQueryプラグインのjQuery GoUp!を利用すると、カスタマイズがいろいろできるようになります。

via:jQuery GoUp!

背景にパララックスで分子的なものを敷けるjQueryプラグイン「Particleground」サンプル

背景にパララックスで分子的なものを敷けるjQueryプラグイン「Particleground」

最近点と点をつないで、分子のように見えるメインビジュアルなどを見るケースが増えているような気がします。
jQueryプラグインのParticlegroundを利用すると、簡単に実現でき、おまけにパララックス的な効果もついてきます。

via:Particleground

セクシーに要素を表示させていくjQueryプラグイン「jQuery Smoove」サンプル

ページ遷移時におしゃれなアニメーションをつけるjQueryプラグイン「Animsition」

最近ページ遷移でおしゃれに動いているサイト多くなりましたよね。実現したいなーって人多いんじゃないでしょうか。jQueryプラグインのAnimsitionならそりゃーもうさくっと実現できますよ!

via:Animsition

セクシーに要素を表示させていくjQueryプラグイン「jQuery Smoove」サンプル

セクシーに要素を表示させていくjQueryプラグイン「jQuery Smoove」

ページを縦長に表示させるようなサイトが増えつつあります。このような時は飽きさせないように表示される要素に動きをもたせると良いです。jQueryプラグインのjQuery SmooveであればCSS3を利用して、セクシーに動かせます。

via:jQuery Smoove

ごく簡単に背景に動画を流せるjQueryプラグイン「Vide」サンプル

YouTubeの動画を綺麗に表示させるJavaScript「PrettyEmbed.js」

YouTubeにアップした動画を表示させる際には公式のiframeダグを利用するケースが多いと思いますが上下にバーがつくなどちょっと物足りないですよね。 jQueryプラグインのPrettyEmbed.jsを利用すれば見た目を簡単に調整することが可能です。

via:PrettyEmbed.js

ごく簡単に背景に動画を流せるjQueryプラグイン「Vide」サンプル

ごく簡単に背景に動画を流せるjQueryプラグイン「Vide」

背景に動画を流しているサイトが増えてきましたよね。
これを簡単に実現できるjQueryプラグインVide - easy as hell jQuery plugin for video backgroundsを紹介します。

via:Vide

mailtoをちょっとだけユーザーフレンドリーにするJavaScript「jQuery Confirm mailto」サンプル

mailtoをちょっとだけユーザーフレンドリーにするJavaScript「jQuery Confirm mailto」

お問い合わせのフォームを作るまでもないなーという場合、mailtoで済ませてしまうことも多いかと思います。 でも、ユーザーにとっては、メーラーがいきなり立ち上がるのも不安になりますよね。 そんな時はjQuery Confirm Mailtoを利用して、いったんダイアログを挟んでみましょう。

via:jQuery Confirm Mailto

マウスオーバーで隠れている要素をふわっと心地よく表示させるJavaScript「flipout_cards」サンプル

マウスオーバーで隠れている要素をふわっと心地よく表示させるJavaScript「flipout_cards」

マウスオーバー時にエフェクトを付けたいなどの希望があるかと思います。 jQueryプラグインのjQuery Flip Out Cardsを利用すると、当該要素にマウスオーバーすると隠していた要素をふわっと、わさっと表示してくれます。

via:jQuery Flip Out Cards

ありきたりなグリッドデザインから卒業!画像をダイヤモンド状に配置するjQueryプラグイン「jquery.diamonds.js」サンプル

ありきたりなグリッドデザインから卒業!画像をダイヤモンド状に配置するjQueryプラグイン「jquery.diamonds.js」

なんかもう綺麗に四角で並べるグリッドデザイン飽きましたよね。 そこで今回紹介するのは、ダイヤモンド状に写真やテキストを配置できるjQueryプラグインのjquery.diamonds.js です。 デザインの幅も広がるのではないでしょうか。

via:jquery.diamonds.js

レスポンシブな円グラフを書ける軽量jQueryプラグイン「Flatmin responsive Piechart Plugin」サンプル

レスポンシブな円グラフを書ける軽量jQueryプラグイン「Flatmin responsive Piechart Plugin」

円グラフを記述できるJavaScriptは多くありますが、jQueryプラグインのPie Chart jQuery Plugin - Flat Frameworkを利用すると簡単かつ軽量かつ、レスポンシブな円グラフを採用することが可能です。

via:Pie Chart jQuery Plugin

わずか3行の記述!jQueryプラグインでローディングを自動表示させる「pace」サンプル

わずか3行の記述!jQueryプラグインでローディングを自動表示させる「pace」

ページが重い時読み込み中を示すローディングを表示させられるとユーザーのストレスを軽減できます。 jQueryプラグインのpaceを利用すると簡単にプログレスバーなどの表示が可能になります。

via:pace

年表に使える!横軸のタイムラインを簡単に表示できるjQueryプラグイン「jqtimeline」サンプル

年表に使える!横軸のタイムラインを簡単に表示できるjQueryプラグイン「jqtimeline」

横軸で年表なんかを作ることがあるかもしれません。 そんな時にはjQueryプラグインjqtimelineを使用すると簡単に導入できて良いかもしれません。

via:jqtimeline

奥行ある3Dぽい表現をさせられるjQueryプラグイン「jQuery Vortex」サンプル

奥行ある3Dぽい表現をさせられるjQueryプラグイン「jQuery Vortex」

画像などの要素を3Dぽく奥行き感ある感じで見せられると面白いです。 jQueryプラグインのjQuery Vortexを利用すると簡単に奥からやってくる感を演出できます。

via:jQuery Vortex

びよーんとした動きでグリッド状に配置してくれるjQueryプラグイン「DyLay」サンプル

びよーんとした動きでグリッド状に配置してくれるjQueryプラグイン「DyLay」

Pinterestの登場からグリッド状に要素を配置するデザインが流行りました。 その多くがウィンドウサイズを変えた時にのそーっと動くものでした。 jQueryプラグインのDyLay - a simple dynamic layout jQuery pluginを利用するとびよーんと小気味よいビートを刻みながら動いてくれます。

via:DyLay

Google Mapのルート表示なども簡単に表示できるjQueryプラグイン「Maplace.js」サンプル

Google Mapのルート表示なども簡単に表示できるjQueryプラグイン「Maplace.js」

Google Mapを表示するJavaScriptはそこそこ簡単ですすが、ルート表示させるとなかなか厄介です。 jQueryプラグインのMaplace.js - A small Google Maps Javascript helper.を利用するとルートを簡単にプロットできたり、特定位置をつなぐ、塗りつぶすなど簡単に表示させられることが可能です。

via:Maplace.js

フォロー率を上げる!?ソーシャルアカウントを印象的に見せるjQueryプラグイン「social-master」サンプル

フォロー率を上げる!?ソーシャルアカウントを印象的に見せるjQueryプラグイン「social-master」

昨今さまざまなソーシャルメディアが増え、いっぺんに表示することも難しくなってきました。 jQueryプラグインのsocial-masterを利用すればTwitter、Facebookをはじめtumblur、Pinterest、Google+などさまざまなソーシャルアカウントを印象的に表示させられます。

via:social-master

読み進めると、すっとトップに戻るを表示するjQueryプラグイン「scrollUp jQuery plugin」サンプル

多彩な動きで表をソートさせるjQueryプラグイン「jQuery Animated Table Sorter」

表をソートさせられると数字が見やすくなります。 jQueryプラグインのjQuery Animated Table Sorterを使用するとソートさせられるだけではなく、多彩な動きもつけてくれちゃいます。

via:jQuery Animated Table Sorter

スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」サンプル

スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」

スマホで画像やコンテンツをスワイプさせて見せられると多くのコンテンツを遷移も少なくて良いかもしれません。 jQueryプラグインのslideToucherなら水平、垂直の両方向にスワイプさせられ便利です。

via:Yuripetusko/slideToucher · GitHub

読み進めると、すっとトップに戻るを表示するjQueryプラグイン「scrollUp jQuery plugin」サンプル

読み進めると、すっとトップに戻るを表示するjQueryプラグイン「scrollUp jQuery plugin」

よくページの下の方まで行くと「トップに戻る」がすっと表示されることがあるかと思います。 scrollUp jQuery pluginを利用するとすっと導入ができます。 すっと出てくるので、目につきやすいのが特徴ですね。

via:scrollUp jQuery plugin

簡単にかっこいいツールバーを作れるjQueryプラグイン「Toolbar.Js」サンプル

簡単にかっこいいツールバーを作れるjQueryプラグイン「Toolbar.Js」

システムなどでよく使うことがあるツールバーを、jQueryプラグインを使って簡単に導入しましょう。 Toolbar.js - jQuery plugin to create tooltip style toobarsは、クリックすると表示させられるツールチップタイプのツールバーが作れます。

via:Toolbar.js

iOSライクに各見出しを上部で固定して見やすくするjQueryプラグイン「jQuery List Plugin」サンプル

iOSライクに各見出しを上部で固定して見やすくするjQueryプラグイン「jQuery List Plugin」

リストを表示していくと長くなって見難くなることがあります。 そこでjQuery List Pluginを利用するとiOSみたいに上部で各見出しを固定してくれるので、自分がいまどの項目を見ているのか見やすくなります。

via:jQuery List Plugin

地図を簡単に表示できるjQueryプラグイン「jHERE」サンプル

地図を簡単に表示できるjQueryプラグイン「jHERE」

地図を表示する場合GoogleMapを利用すればある程度簡単にできますが、初めての方には難しいところもあります。 そんな時は、jQueryプラグインのjHEREを利用してみてはいかがでしょうか。

via:jHERE

ソーシャルメディアの情報をpinterest風に一覧表示できるjQueryプラグイン「Socialist」サンプル

ソーシャルメディアの情報をpinterest風に一覧表示できるjQueryプラグイン「Socialist」

ソーシャルメディアが普及し、内容をまとめて一気に見せたいと思うケースも増えています。 jQuery Socialist Social Media PluginはソーシャルメディアをまとめてPinterest風に表示できてしまいます。

via:jQuery Socialist Social Media Plugin

見せ方がとても良いモーダルjQueryプラグイン「Avgrund Modal」サンプル

見せ方がとても良いモーダルjQueryプラグイン「Avgrund Modal」

モーダルってだいたい定形が決まった感じですが、今回のjQuery plugin for Avgrund concept popinはクリックするとぐいっと中に寄って目立つ感じにしてくれます。

via:jQuery plugin for Avgrund concept popin

背景にmp4の動画を流せるjQueryプラグイン「BigVideo.js」サンプル

背景にmp4の動画を流せるjQueryプラグイン「BigVideo.js」

背景に動画を流せると印象的なサイトになります。 これを簡単に実現するのがBigVideo.js - The jQuery Plugin for Big Background Videoです。インパクトのあるサイトにご利用ください。

via:BigVideo.js

時間を電光掲示板風に表示するjQueryプラグイン「jQuery uLED plugin」サンプル

時間を電光掲示板風に表示するjQueryプラグイン「jQuery uLED plugin」

カウントダウンや現在の時刻を表示することがあるかもしれません。 そんな時はjQuery uLED pluginを利用すると綺麗にかつ簡単に表現する事ができます。

via:jQuery uLED plugin

要素をスムーズにドラッグさせられるjQueryプラグイン「jquery.pep.js」サンプル

要素をスムーズにドラッグさせられるjQueryプラグイン「jquery.pep.js」

画像などの要素をドラッグさせるようなインタラクティブな表現がスマホ時代には求められそうです。 Pep - kinetic drag on mobile & desktopはこれを簡単に実現できるjQueryプラグインです。

via:Pep

要素をソートさせるjQueryプラグイン「TinySort」サンプル

要素をソートさせるjQueryプラグイン「TinySort」

画像やリスト、表組みなどソートできるようにしておくと便利です。 jQueryプラグインのTinySort 1.3.27はこれを簡単に実現可能です。

via:TinySort 1.3.27

tableの表組みを一瞬で彩る!jQueryプラグイン「tablecloth.js」サンプル

tableの表組みを一瞬で彩る!jQueryプラグイン「tablecloth.js」

表組みをtableで組むとちょっと華やかさにかけてしまいます。 そんな時はtablecloth.jsを利用し、カスタマイズしましょう

via:tablecloth.js

jQueryプラグイン「gmaps.js」でルート案内付きGoogle Mapを作成するサンプル

jQueryプラグイン「gmaps.js」でルート案内付きGoogle Mapを作成する

jQueryプラグインのgmaps.jsを利用すると簡単にGoogle Mapを作成できることできます。 またルート案内もできるので、駅から会社が少し離れていた場合の推奨ルートを表示してあげるのもいいかもしれません。 今回はこのルート案内を設定する方法を紹介します。

via:gmaps.js

美しい世界地図をJavaScriptで描ける「jQuery Vector Maps」サンプル

美しい世界地図をJavaScriptで描ける「jQuery Vector Maps」

世界地図を表示したい場合、フリー素材やGoogle Mapなどあるかと思いますが、ちょっと味気ないですよね。
jQuery Vector Mapsを利用すると手間少なく、かつイマドキ風の美しい世界地図を描画可能です。

via:jQuery Vector Maps

綺麗なローディングを設置できるJavaScript「Percentage Loader」サンプル

綺麗なローディングを設置できるJavaScript「Percentage Loader」

ローディングというとぐるぐるまわったりするアニメーションgifが多いですが、jQueryプラグインのPercentage Loaderを使用すると綺麗なものを設置できます。
ユーザーストレスを少し軽減できるかもしれません。

via:Percentage Loader

フルスクリーンで華麗に切り替えられるJavaScript「Fullscreen Slit Slider with jQuery and CSS3 」サンプル

印刷時にリンクをQRコード化してくれるjQueryプラグイン「printQr jQuery Plugin」

これは非常にインパクトな表現です。
フルスクリーンで中央からスリットがはいったようなエフェクトをかけながら、画面切り替えが行えるFullscreen Slit Slider with jQuery and CSS3 | Codropsです。

via:Fullscreen Slit Slider with jQuery and CSS3

印刷時にリンクをQRコード化してくれるjQueryプラグイン「printQr jQuery Plugin」サンプル

印刷時にリンクをQRコード化してくれるjQueryプラグイン「printQr jQuery Plugin」

ちょっとマニアックな使い方かもしれませんが、印刷時にリンクをQRコード化してくれるjQuery.printQr() Pluginを紹介します。 画面では見せたくないけど、印刷した時に携帯とかで閲覧してみてもらいたい時に利用してみてはいかがでしょうか。 なお、対象リンクをhiddenにしても印刷時にQRは表示されるので隠しクーポンとかにも使えるかもしれません。

via:jQuery.printQr() Plugin

ページをめくる表現をつけるjQueryプラグイン「turn.js」サンプル

ページをめくる表現をつけるjQueryプラグイン「turn.js」

ページをめくるような表現付けたくなる時ありますよね。 そんな時はturn.js - The page flip effect for HTML5を利用すると簡単に実現できます。
スマホ、タブレット対応していますが、HTML5なので一部のIEには非対応です。

via:turn.js

ちょっとオシャレな円グラフ的なものを作成できるjQueryプラグイン「jQuery Knob」サンプル

ちょっとオシャレな円グラフ的なものを作成できるjQueryプラグイン「jQuery Knob」

円グラフをオシャレに描きたい時にはjQuery Knobが良いかもしれません。 見た目も機能性もあるjQueryプラグインです。

via:jQuery Knob

Pinterestライクに要素を整列させるjQueryプラグイン「The Wookmark jQuery plugin」サンプル

Pinterestライクに要素を整列させるjQueryプラグイン「The Wookmark jQuery plugin」

一時期流行ったデザインのため以前から要素を整列させるjQueryプラグインは多数ありました。 現在Pinterestが海外では注目されているため、これ系のデザインニーズが改めて高まりそうです。 そこで、これを実現するWookmark jQuery Pluginを紹介します。

via:Wookmark jQuery Plugin

どんな要素にもページネーションを付けられるjQueryプラグイン「jPages」サンプル

どんな要素にもページネーションを付けられるjQueryプラグイン「jPages」

要素を多く記述したいけれど、ページはわけたくない。 楽してページングを付けたい、そんなあなたにはjPagesが最適です。

via:jPages

ソーシャルメディアへの共有をまとめてくれるJavaScript「Sharrre」サンプル

ソーシャルメディアへの共有をまとめてくれるJavaScript「Sharrre」

Twitter、Facebook、Google+とソーシャルメディアは広がり続けています。 これへの対応のために手間を煩わせたくないものです。 そこで、Sharrre - A plugin for sharing buttonsを利用すれば合計数も表示してくれます。

via:Sharrre - A plugin for sharing buttons

モーダルを簡単に実現させるJavaScript「Reveal」サンプル

さまざまな種類のメッセージをフロート表示できるJavaScript「jQuery.msgBox()」

ボタンを押した時にメッセージをライトボックスのように閲覧者に知らせてあげると伝わりやすいと思います。 jQuery.msgBox()は、いろいろなパターンでこれを実現できます。。

via:jQuery.msgBox()

モーダルを簡単に実現させるJavaScript「Reveal」サンプル

モーダルを簡単に実現させるJavaScript「Reveal」

一度開いたダイアログボックスを閉じるまで、他の操作をできなくするモーダルを簡単に取り入れるJavaScriptReveal: jQuery Modal Plugin from ZURBを紹介します。

via:Reveal: jQuery Modal Plugin from ZURB

サイトのチュートリアルを表示できるJavaScript「jQuery Joyride Feature Tour Plugin」サンプル

サイトのチュートリアルを表示できるJavaScript「jQuery Joyride Feature Tour Plugin」

サイトの使い方を見せるのはFacebookなども取り入れている昨今注目の方法です。 jQuery Joyride Feature Tour Pluginでは簡単にそれを実行でき、チュートリアルに利用できそうです。

via:jQuery Joyride Feature Tour Plugin

カウントダウン表示を簡単にできる「jQuery Countr」サンプル

カウントダウン表示を簡単にできる「jQuery Countr」

サイト訪問から一定時間までをカウントダウン出来るjQuery Countrです。 これを用いると、制限時間を設けて何かをさせたりできそうです。

via:jQuery Countr

iOSライクなスクロールバーを表現できるJavaScript「NICESCROLL」サンプル

iOSライクなスクロールバーを表現できるJavaScript「NICESCROLL」

iOSみたいなスクロールバー表示があるとユーザビリティが向上されそうです。 NICESCROLLは、初期にスクロールバーを見せたのち、いったんフェードアウトさせられます。 またスマートフォンのタッチイベントにも対応しています。

via:NICESCROLL

ページをめくる表現を与えられるJavaScript「Useful Peel Back With jQuery」サンプル

ページをめくる表現を与えられるJavaScript「Useful Peel Back With jQuery」

人は秘密を覗きたくなる生き物です。 というわけで、ページがめくれそうな感じのデザインがあると見てもらえる率が高まりそうです。 Useful Peel Back With jQueryはそれを実現してくれます。

via:Useful Peel Back With jQuery

表組みの見出しを上部に固定できるJavaScript「Floating Table Header」サンプル

表組みの見出しを上部に固定できるJavaScript「Floating Table Header」

表組み縦に長くなると項目名が見えなくなってしまいます。 これを解消するのがFloating Table Headerです。 最上部の項目を固定することが可能です。。

via:Floating Table Header

所定時間からの経過をカウントアップするJavaScript「jQuery CountUp Plugin」サンプル

所定時間からの経過をカウントアップするJavaScript「jQuery CountUp Plugin」

ある時間からどのくらい経過したのかを表示したいこともあるかと思います。 jQuery CountUp Pluginを利用すれば簡単に導入可能です。

via:jQuery CountUp Plugin

影をマウス位置に追随させられるJavaScript「OKShadow」サンプル

影をマウス位置に追随させられるJavaScript「OKShadow」

要素にドロップショドウをかけることがあるかと思いますが、OKShadowを利用すると、その影をマウス位置に追随させることが可能です。 これにより、3D表現を擬似的に実現させられます。

via:OKShadow

全画面スライドを可能にするJavaScript「FerroSlider jQuery Plugin」サンプル

全画面スライドを可能にするJavaScript「FerroSlider jQuery Plugin」

全画面スライドをさせられるとサイトの遷移が面白くなり、ユーザーを惹きつけることができます。 :: Alessandro Ferrini :: FerroSlider jQuery Pluginはこれを簡単に実現できます。 また簡単にプレゼンにも流用できそうです。

via:FerroSlider jQuery Plugin

Google+のアクティビティを表示するJavaScript「Google+ Activity Widget - jQuery Plugin」サンプル

Google+のアクティビティを表示するJavaScript「Google+ Activity Widget - jQuery Plugin」

Google+を利用している人もいるといるかと思います。 そのGoogle+のアクティビティを表示できるGoogle+ Activity Widget - jQuery Pluginを紹介します。

via:Google+ Activity Widget - jQuery Plugin

faviconに数字を乗せられる「jQuery Favicon Notifier」サンプル

faviconに数字を乗せられる「jQuery Favicon Notifier」

Googleみたいにfaviconに数字を乗せたいという人には最適なJavaScriptが登場です。 jQuery Favicon Notifierは数字表示以外に、表示位置、色まで設定可能です。

via:jQuery Favicon Notifier

作業の進捗状況を表すガントチャートを作成できる「jQuery.ganttView」サンプル

作業の進捗状況を表すガントチャートを作成できる「jQuery.ganttView」

作業の進捗を表すのによく利用されるガントチャート。 これをJavaScriptで表示できるのがjQuery.ganttViewです

via:jQuery.ganttView

要素を点滅させられるJavaScript「jquery.flicker」サンプル

要素を点滅させられるJavaScript「jquery.flicker」

点滅させることで注目を引くことができるjquery.flickerです。 頻繁に使うものではないと思いますが、注意を促したい時に使ってみるのも良いかもしれません。

via:jquery.flicker

jQueryでプレゼンテーションできる「Fathom.js」サンプル

jQueryでプレゼンテーションできる「Fathom.js」

コーディングに慣れた人はパワーポイントよりもhtmlでプレゼン資料を作るほうが簡単なのではないでしょうか。 Fathom.jsを利用することで手軽にプレゼン資料を作成可能です。

via:Fathom.js

jQueryで要素がページの一番上まできたら位置を固定するサンプル

jQueryで要素がページの一番上まできたら位置を固定する

最近のサイトでよく見るのが、スクロールしていくと途中で要素が固定されるやつ。 印象的で、かつ残したい要素が訴求できる手段です。 jQueryを使うと簡単に実現でき、また複数の要素を代わる代わる固定させられます。

via:Persistent Headers | CSS-Tricks

要素を手軽にソートできる「jSort - jQury sorting plugin」サンプル

要素を手軽にソートできる「jSort - jQury sorting plugin」

リストがずらっと並んだ時、ソートができると目的のものに到達しやすくなり、使いやすくなります。 jQury sorting plugin - jSortを使用すれば、簡単に要素をソートできるようになります。

via:jQury sorting plugin - jSort

要素をランダムにフェードイン/アウトさせる「LivingFade jQuery Plugin」サンプル

要素をランダムにフェードイン/アウトさせる「LivingFade jQuery Plugin」

要素のフェードイン/アウトをランダムにさせる「LivingFade jQuery Plugin」を利用すると少し異なった印象を与えられそうです。 また、昨今見られるページ表示後に要素をフェードインさせる、あるいはリンクをクリック後に要素をフェードアウトさせてから遷移させるなども簡単に導入できそうです。

via:LivingFade jQuery Plugin

かわいいデザインのツールチップ(吹き出し)効果を与える「grumble.js」サンプル

かわいいデザインのツールチップ(吹き出し)効果を与える「grumble.js」

ツールチップ(吹き出し)により、文章や画像の補足をすることで、わかりやすくすることがあります。 よくあるプラグインだとちょっとデザインが・・・という方にgrumble.jsをお勧めします。 ポップでかわいいデザインで作成することができます。

via:grumble.js

titleを動かすJavaScript「Marquee in title」サンプル

titleを動かすJavaScript「Marquee in title」

いっときtitleを動かすのが話題になったことがありました。 それをjQueryで実現したのがMarquee in titleです。 ちょっとしたインパクトを出すためのネタにいいかもしれません。。

via:Marquee in title

tableの内容をグラフ化!「Chartify -- A Visualization Plugin for jQuery」サンプル

tableの内容をグラフ化!「Chartify -- A Visualization Plugin for jQuery」

tableで表組みにした内容を手軽にグラフにしたいことがあると思います。 Chartify -- A Visualization Plugin for jQueryを利用すると、簡単にグラフ化できてしまいます。

via:Chartify -- A Visualization Plugin for jQuery

JavaScriptでdiv要素をさくっとスライド!「jQuery Slider2」サンプル

JavaScriptでdiv要素をさくっとスライド!「jQuery Slider2」

画像をスライドさせるものは多くありますが、画像だけじゃなくテキストやリンクもまとめて何枚かのスライドにしたい。 jQuery Slider2を利用するとこれを軽量のJavaScriptで実現してくれます。

via:jQuery Slider2

これは面白い!アメコミマンガ風に表示するJavaScript「Fumetto」サンプル

これは面白い!アメコミマンガ風に表示するJavaScript「Fumetto」

単純にテキストを表示させるだけではつまらないので、こんな風に遊び心を出してみるといいかもしれません。 Fumetto 1.0はアメコミ風にテキストを吹き出しなどにしてくれます。 CSS3を利用しているのIE8以下などはちょっとあれです。

via:Fumetto 1.0

円形のタイマーを表示させるjQueryプラグイン「Pietimer」サンプル

円形のタイマーを表示させるjQueryプラグイン「Pietimer」

あとどのくらい時間が残っているのか、図にしてあるとわかりやすいですよね。 Pietimer jQuery Pluginは、それを実現できるjQueryプラグインです。

via:Pietimer jQuery Plugin

背景をざらっとさせるjQueryプラグイン「IntroTzikas」サンプル

背景をざらっとさせるjQueryプラグイン「IntroTzikas」

海外サイトを中心に背景が少しざらついているデザインが多くなっています。 これをJavaScriptで実現したのがDanielRapp/Noisyです。

via:DanielRapp/Noisy

ページを開いたときにイントロエフェクトを表示する「IntroTzikas」サンプル

ページを開いたときにイントロエフェクトを表示する「IntroTzikas」

よくFLASHではローディング的に線がぐわっと登場してくるエフェクトがあったりします。 これをjQueryのプラグインで実現したのが、IntroTzikas - Animated Intro - jQuery Pluginです。 以前紹介したjQueryでFlashっぽいローディングを表示させられる「QueryLoader -- preload your website in style」|skuare.netより設定項目とサイズが少し良いです。

via:IntroTzikas - Animated Intro - jQuery Plugin

StaticなGoogle Mapをズームさせる「jQuery Static Gmap Zoom」サンプル

StaticなGoogle Mapをズームさせる「jQuery Static Gmap Zoom」

Google MapにはドラッグやズームができないStaticモードがあります。 自分の場所がだけを見てくれ、というような場合に使用するかと思いますが、利用者には不便でした。 そこで、jQuery Static Gmap Zoom | phpgeek.dkを使用すればマウスオーバーでズームをさせられるようになります。

via:jQuery Static Gmap Zoom | phpgeek.dk

YouTubeのプレイリストを良い感じで表示してくれるjQueryプラグイン「jQuery youtube playlist plugin」サンプル

YouTubeのプレイリストを良い感じで表示してくれるjQueryプラグイン「jQuery youtube playlist plugin」

最近YouTubeを表示させるサイトが多くなっていますよね。 そんな時、jQuery youtube playlist plugin - youtubeplaylistを利用すると、自分の好きな動画をプレイリストにして簡単に表示できます。

via:jQuery youtube playlist plugin

わずか2行でスライドショーを実現「A slide-show in 2 lines of JavaScript」サンプル

要わずか2行でスライドショーを実現「A slide-show in 2 lines of JavaScript」

フルスクリーンのスライドショーを2行で実現するチュートリアルです。 なお、原文だとJS2行となっていますが、もうちょいあります。簡単には変わりありません

via:A slide-show in 2 lines of JavaScript

要素をブルブルさせるjQueryプラグイン「jRumble」サンプル

要素をブルブルさせるjQueryプラグイン「jRumble」

なんだか楽しかったので、紹介します。 jRumble | A jQuery Plugin That Rumbles Elementsは要素をブルブルさせられるjQueryのプラグインです。 マウスオーバーで印象を与える時に使えなくもないかもしれません。 もしかしたらキャラクターをブルブルさせたら面白いかもしれません。 ま、好きに使ったらいいじゃないでしょうかね。

via:jRumble | A jQuery Plugin That Rumbles Elements

jQueryとtempo.jsでTwitterのjsonをレンダリングしてタイムラインを表示サンプル

jQueryとtempo.jsでTwitterのjsonをレンダリングしてタイムラインを表示

昨今jsonで値を返すところが増えています。 Tempo :: The tiny JSON rendering engineを使用すると直感的に操作できます。 今回はこれを利用し、Twitterのタイムラインを表示してみます。

via:Tempo :: The tiny JSON rendering engine

つながりが見えるコンセプトマップを作れるJavaScript「jquery-conceptmap-plugin」サンプル

つながりが見えるコンセプトマップを作れるJavaScript「jquery-conceptmap-plugin」

思いつくままにアイディアを出し、概念を視覚的に整理したコンセプトマップ。 それをJavaScriptで作ってみましょう。

via:knv/jquery-conceptmap-plugin

html5とjQueryでページのソースを綺麗に表示するサンプル

html5とjQueryでページのソースを綺麗に表示する

サンプルページのソースを簡単にかつ綺麗に見せたい時があるかと思います。 今回はそれをhtml5とjQueryを使って簡単にできる手法を紹介します。

via:Make a ‘View Source’ Button | CSS-Tricks

広告の表示を遅くして目立たせるjQueryプラグイン「jQuery LazyLoad Ad」サンプル

広告の表示を遅くして目立たせるjQueryプラグイン「jQuery LazyLoad Ad」

サイト運営者にとっては広告を目立たせ閲覧者に見てもらいたいものです。 jQuery LazyLoad Advertising Pluginは、ユーザーが広告が表示される場所を見た時に表れるようにでき、閲覧者の目に留まるようにしてくれます。 またページの表示も早くなるということです。

via:jQuery LazyLoad Advertising Plugin

jQueryプラグインで要素をキリッっと切り替える「MobilySelect」サンプル

jQueryプラグインで要素をキリッっと切り替える「MobilySelect」

ポートフォリオをWEB、紙・・・などと切り替えるときに使えそうなjQueryプラグインMobilySelectを紹介します。 これを導入すればユーザーへの訴求力が高まるかもしれません。

via:MobilySelect

FacebookのWallを表示できるjQueryプラグイン「Facebook Wall」サンプル

FacebookのWallを表示できるjQueryプラグイン「Facebook Wall」

巷で流行りのFacebookですが、このWall部分を表示できるプラグインを紹介します。 シンプルな名前の通り、導入もシンプルです。

via:Facebook Wall

tableの見たいところをハイライト表示してくれるjQueryプラグイン「jQuery HighTabler Plugin」サンプル

tableの見たいところをハイライト表示してくれるjQueryプラグイン「jQuery HighTabler Plugin」

長い文章を読んでいると、どこを読んでいるかわからなくことがあります。 そんな時、読んでいるところをハイライト表示してくれるとわかりやすくなります。 jQuery HighTabler Pluginはそれを実現するjQueryプラグインです

via:jQuery HighTabler Plugin

ページ遷移時にエフェクトを与えるjQueryプラグイン「jQuery Pageswitch Plugin」サンプル

ページ遷移時にエフェクトを与えるjQueryプラグイン「jQuery Pageswitch Plugin」

ページ遷移の際に何らかのエフェクトが発生するサイトがありますが、今回紹介するjQuery Animated Pageswitch Pluginを利用することで、それを簡単に再現可能です。

via:jQuery Animated Pageswitch Plugin

YOUTUBEを背景いっぱいに表示できるjQueryプラグイン「jquery-tubular」サンプル

YOUTUBEを背景いっぱいに表示できるjQueryプラグイン「jquery-tubular」

これは簡単に導入できてよさげなプラグインです。 本をめくるような表現をさくっと導入できるViewbook - jQuery Pluginを紹介します。 また、オプションも色々あるので、オリジナルなコンテンツになりそうです。

via:Viewbook - jQuery Plugin

YOUTUBEを背景いっぱいに表示できるjQueryプラグイン「jquery-tubular」サンプル

YOUTUBEを背景いっぱいに表示できるjQueryプラグイン「jquery-tubular」

背景に動画をおいているイケてるサイトありますよね。 それをYOUTUBEを使ってお手軽に実現してみましょう。 jQueryプラグインのjquery-tubularです。

via:jquery-tubular

シンタックスハイライターでコードをわかりやすくする「jQuery Syntax Highlighter」サンプル

シンタックスハイライターでコードをわかりやすくする「jQuery Syntax Highlighter」

コードを表示させたい時、テキストの一部を分類ごとに異なる色やフォントで表示するとわかりやすくなります。 これをシンタックスハイライトと呼んだりしますがSnippet :: jQuery Syntax HighlighterはjQueryでそれを簡単に実現します。 また選べるスタイルも多いので、重宝するかも知れません。

via:Snippet :: jQuery Syntax Highlighter

Facebookのステータスを表示できるJavaScript「Facebook Status」サンプル

Facebookのステータスを表示できるJavaScript「Facebook Status」

最近巷ではFacebookな感じなので、ステータスを表示させたくなる人もいるのではないでしょうか。 JavaScriptライブラリのjQueryプラグイン「Facebook Status」なら簡単に表示させられるようになります。

via:Facebook Status

要素を色んな風にスライドさせるJavaScript「qBox plugin」サンプル

要素を色んな風にスライドさせるJavaScript「qBox plugin」

要素を整然と並べるとちょっと面白みがなくなりますよね。 そんな時jQueryプラグインのQBox pluginを使用するとユーザーの目線をひきつけられるでしょう。

via:QBox plugin

>横のラインをハイライト表示して読みやすくするJavaScript「Highliner jQuery Plugin」サンプル

横のラインをハイライト表示して読みやすくするJavaScript「Highliner jQuery Plugin」

テキストだらけで読みにくい。 そんなサイトにはこれを導入するといいかもしれません。 HighLiner jQuery pluginは横のラインをハイライト表示させその部分に目線を集中させられます。 右のほうで広さを調整できたり、閉じたりもできます。

via:HighLiner jQuery plugin

[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via couldサンプル

[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could

記事後半まで読んでくれた意欲の高い人に対しアピールが出来、ソーシャルメディア上の伝播がより期待できます。 購入ボタンやお問合せボタンなどを置いてもいいかもしれません。

inspired via:could

faviconをJavaScriptで指定して日付も表示できる「jQuery.favicon」サンプル

faviconをJavaScriptで指定して日付も表示できる「jQuery.favicon」

ネタ的なJavaScriptですが、どこかで使えそうなので。 faviconをJavaScriptで指定でき、テキストも表示させられるjQuery favicon pluginです。 これを利用するとGoogleカレンダーみたいなアイコンにテキストを表示させられますね。

via:jQuery favicon plugin

なんでも拡大しちゃうjQueryプラグイン「Zoomooz.js」サンプル

なんでも拡大しちゃうjQueryプラグイン「Zoomooz.js」

これわりと使いようによっては面白くなりそうなjQueryプラグインです。 Zoomooz.jsは指定要素をクリックしたら拡大表示してくれます。 ステップなどで利用すると良さそうです。

via:Zoomooz.js

Twitterなどソーシャルなフィードを表示するJavaScript「So So Social Plug-In」サンプル

Twitterなどソーシャルなフィードを表示するJavaScript「So So Social Plug-In」

ソーシャルメディアが浸透して、ブログなどに表示するケースが増えているかと思います。 そこで、jQuery - So So Socialを使用しまとめて表示させてみるのはいかがでしょうか?

via:jQuery - So So Social

ページや要素をマウス位置に応じて動かすJavaScript「Levitation jQuery plugin」サンプル

ページや要素をマウス位置に応じて動かすJavaScript「Levitation jQuery plugin」

画像やテキストなどの要素をマウスの位置に応じて動かすJavaScript「Levitation jQuery plugin」です。 これをうまく利用すると奥行き感などを表現でき、面白い効果を与えられそうです

via:Levitation jQuery plugin

[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示するサンプル

[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する

フォトグラファー 木村 隆宏さんのサイトを御覧ください。 こちらのサイトでは、アクセス時にポートフォリオを順番にフェードさせることで非常に印象的となっています。 今回はこちらで使用しているJavaScriptをのぞきながら、どう実現しているのかを見ていきたいと思います。

inspired by フォトグラファー 木村 隆宏さん

ツールチップライクに最新Tweetsを表示させられるJavaScript「Latest Tweets Tooltip with jQuery」サンプル

ツールチップライクに最新Tweetsを表示させられるJavaScript「Latest Tweets Tooltip with jQuery」

コンテンツ内に多ユーザーを表示させたい時@anywhereのhovercardじゃちょっと物足りない・・・またTwitter検索の結果も表示させたい。 そんなあなたには、Latest Tweets Tooltip with jQueryがオススメです。 検索されたワードの最新Tweetsをインラインで表示させてくれますので、ユーザー名やハッシュタグなどで検索させると便利です。

via:Latest Tweets Tooltip with jQuery

スマートフォンでもドロップ&ドラッグを簡単に実現:Jquery Mobile Drag And Dropサンプル

スマートフォンでもドロップ&ドラッグを簡単に実現:Jquery Mobile Drag And Drop

iPhoneやAndoroidの登場により、サイトのUIが大きく変わってきています。 タップしてドラッグするといったものも通常のサイトでは使用されなかった動きではないでしょうか。 これをjQueryで実現するプラグイン「Jquery Mobile Drag And Drop」を紹介します。

via:Jquery Mobile Drag And Drop

要素に影を付けられるjQueryプラグイン「shadowOn」サンプル

要素に影を付けられるjQueryプラグイン「shadowOn」

最近ではCSS3で、テキストとかボックスなどの要素に影を付けられるようになりましたよね。 参考)ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応 - builder by ZDNet Japan CSS3だとあれなので、JavaScriptでやりましょうか。というjQueryプラグイン「shadowOn」。

via:shadowOn

tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」サンプル

tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」

tableで表組みにしたものをグラフ化するのは面倒な作業だったりします。 そこでjQueryプラグイン「gvChart」で簡単にグラフ化しましょう。 通常通りtableを記載し、JavaScriptを記述すれば完成です。

via:gvChart

選択した項目を明示させられるjQueryプラグイン「lister」サンプル

選択した項目を明示させられるjQueryプラグイン「lister」

あるリストの中から選択させて申し込ませたい場合、少なければcheckboxなどでも耐えられるかもしれませんが、多くなってくると何がなんだかわかりにくくなります。 そこでjQueryプラグインのlisterを利用し選択項目を明示してあげましょう。

via:lister

jQueryと@anywhereでさくっとTwitterを表示「jTweetsAnywhere」サンプル

jQueryと@anywhereでさくっとTwitterを表示「jTweetsAnywhere」

Twitterからリリースされた@anywhereを、もっとわかりやすく利用するjQueryプラグインを紹介。 jTweetsAnywhere - jQuery Twitter Widget with @Anywhere supportで簡単にサイトに導入しましょう。

via:jTweetsAnywhere

jQueryプラグインでお手軽スライダーを作る!「Billy Carousel」サンプル

jQueryプラグインでお手軽スライダーを作る!「Billy Carousel」

サイトで使いどころが多いのが要素を次々に切り替えるエフェクトです。 これを世間ではカルーセルと呼んでいて、よく使われています。 jQueryプラグインのBilly the Carouselもそんなカルーセルの一つで、シンプルに使用できます。

via:Billy the Carousel

複数要素を小気味良く動かせるJavaScript「Magical Scroll」サンプル

複数要素を小気味良く動かせるJavaScript「Magical Scroll」

jQuery Easing Pluginという動きに特化したプラグインもありますが、::Magical Scroll::を使用すると簡単に複数の要素を小気味良く連動して動かすことが可能です。

via:::Magical Scroll::

jQueryで要素をぐるぐる回す「jQuery Circulate」サンプル

jQueryで要素をぐるぐる回す「jQuery Circulate」

jQuery Circulateは画像やテキストなどあらゆる要素をぐるぐる回すことができるJavaScriptです。 ちょっとしたギミックとしてサイトに取り入れてみてはいかがでしょうか。

via:jQuery Circulate

jQueryで円グラフを簡単に表示するプラグイン「Peity」サンプル

jQueryで円グラフを簡単に表示するプラグイン「Peity」

円グラフをサイトで使用することがあるかと思います。
そんな時、JavaScriptライブラリのjQueryなら簡単に表示させることが可能です。

via:Peity . progressive <canvas> pie charts

ページを最後まで見たらメッセージを表示するJavaScript「End of Page Slide Out Box with jQuery」サンプル

ページを最後まで見たらメッセージを表示するJavaScript「End of Page Slide Out Box with jQuery」

最近のサイトはフッターに多くの情報を載せて回遊率の向上を図っています。 これをJavaScriptを利用して、もっと印象的にさせられます。

via:End of Page Slide Out Box with jQuery | Codrops

JavaScriptでピンポンのゲームを堪能できる「jQuery pong」サンプル

JavaScriptでピンポンのゲームを堪能できる「jQuery pong」

JavaScriptでピンポンできるjQuery pongです。 はい、ネタです・・・。 勝てませんしね。。

via:jQuery pong

tableのどこを見ているか色付けてくれるJavaScript「Table Highlighter」サンプル

tableのどこを見ているか色付けてくれるJavaScript「Table Highlighter」

tableで作られた表組みを見ていると、いまどこを見ているのかわかりにくくなります。 特に縦長の表だとなにがなんだかわかりません。 そこで、いまどこを見ているのか、色を付けて表示してくれるJavaScriptTable Highlighterを紹介します。

via:Table Highlighter

サイドからスライドインできるコンテンツを表示可能なJavaScript「Jquery Side Content」サンプル

サイドからスライドインできるコンテンツを表示可能なJavaScript「Jquery Side Content」

サイトの要素として入れたいけど、あまり重要ではないけれど印象づけたい。 例えばサイトの概要をスライドインするコンテンツとして利用してみてはいかがでしょうか。 Jquery Side Contentを利用することで、簡単に導入することが可能です。

via:Jquery Side Content

tableで作った表組のどこを見ているかを明示するJavaScript「TargetTable jQuery Plugin」サンプル

tableで作った表組のどこを見ているかを明示するJavaScript「TargetTable jQuery Plugin」

大きな表組みを作ると今どこを見ているのかわからなくなってしまいます。 どこを見ているのか明示できるとユーザーフレンドリーかもしれません。 今回はTargetTable jQuery Pluginを利用して実現します。

via:TargetTable jQuery Plugin

jQueryで誰がRetweetしたかアイコンでわかる「who-tweet-button」サンプル

jQueryで誰がRetweetしたかアイコンでわかる「who-tweet-button」

Retweet数がわかるTweetMemeを利用しているサイトが多く見られます。 今回はRetweetしたユーザーのサムネイルを表示するwho-tweet-button - Project Hosting on Google Codeを紹介します。

via:jQuery Roundabout

気楽に要素を回転させられるJavaScript「jQuery Roundabout」サンプル

気楽に要素を回転させられるJavaScript「jQuery Roundabout」

画像などの要素を回して印象的に見せたい。 そんな時にはJavaScriptのjQuery Roundaboutを使用すると良いかもしれません。 手軽に導入できます。

via:jQuery Roundabout

ハイクオリティのグラフ生成JavaScript「Highcharts」サンプル

ハイクオリティのグラフ生成JavaScript「Highcharts」

JavaScriptライブラリのjQueryを利用してハイクオリティのグラフを生成できる「Highcharts - Interactive JavaScript charts for your webpage」を紹介します。 ※非商用にて無償です。

via:Highcharts

自動でページネーションを付与できるJavaScript「JQuery Pagination Plugin 」サンプル

自動でページネーションを付与できるJavaScript「JQuery Pagination Plugin 」

ページが長くなる時に分割表示できるとユーザーフレンドリーになります。 また同時にページネーションとかページングと呼ばれるものを付るとより一層好ましいです。 これらすべてを自動で行ってくれる「Jquery Paginator」を障害します。

via:Jquery Paginator

Google Mapsを簡単に表示するJavaScript「gMap」サンプル

Google Mapsを簡単に表示するJavaScript「gMap」

Google Mapって便利ですよね。 でも細かい設定をするのは少し面倒とお思いの方にjQueryプラグインの「gMap - Google Maps Plugin For jQuery」を紹介します。 マーカー位置やzoomレベル、コントローラー設置など設定が簡単に可能です。

via:gMap - Google Maps Plugin For jQuery

twitterのリストを使って、サイトのファンを表示するJavaScript「A Twitter List Powered Fan Page」サンプル

twitterのリストを使って、サイトのファンを表示するJavaScript「A Twitter List Powered Fan Page」

サイトのファンをtwitterのリスト機能を使って表示してみます。 A Twitter List Powered Fan PageからjQueryを利用して実現します。

via:A Twitter List Powered Fan Page

雪が舞い散るJavaScript「Snowfall」サンプル

雪が舞い散るJavaScript「Snowfall」

冬ですね。サイトにも雪をふらせたくなってきましたね。 JavaScriptライブラリのjQueryプラグインSnowfall Pluginを使用すると、雪を舞い散らせることが可能です。

via:Snowfall Plugin

コードを見やすく表現するJavaScript「beautyOfCode」サンプル

コードを見やすく表現するJavaScript「beautyOfCode」

htmlやJavaScriptをサイトで書いているときに見やすくしたいという欲求があると思います。 jQueryプラグインのbeautyOfCodeはコードを見やすくする、いわゆるシンタックスハイライトです。

via:beautyOfCode

棒グラフを簡単に表示できるJavaScript「Horizontal Bar Graph in jQuery」サンプル

棒グラフを簡単に表示できるJavaScript「Horizontal Bar Graph in jQuery」

棒グラフを作るのは手間ですが、jQueryプラグインの「jQuery Horizontal Bar Graph」を利用すると簡単に実現可能です。 またソース上に数値が残るので、SEOをある程度犠牲にしなくてすみそうです。

via:jQuery Horizontal Bar Graph

要素をスライドさせていくカルーセル JavaScript「jQuery carrousel」サンプル

要素をスライドさせていくカルーセル JavaScript「jQuery carrousel」

要素、特に画像、をスライドさせて表示させることで領域が小さいながらも多くの情報を伝えることが可能になります。 今回はjQueryプラグインの「jQuery carrousel」を利用します。

via:jQuery carrousel

スタイリッシュなデジタル時計を作るJavaScript「jDigiClock」サンプル

スタイリッシュなデジタル時計を作るJavaScript「jDigiClock」

サイトに時計を表示したい人はjQueryプラグインの「jDigiClock」を使用すれば、スタイリッシュで印象的なものが導入できます。 しかも天気だって出ます・・・。

via:jDigiClock

JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」サンプル

JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」

要素のスライドはサイトでよく使用する手法ではないでしょうか? それが簡単にできる「bxSlider | jQuery Content Slider」を紹介します。

via:bxSlider | jQuery Content Slider

さくっとtwitterのタイムラインを表示するJavaScript「jQuery plugin for Twitter」サンプル

さくっとtwitterのタイムラインを表示するJavaScript「jQuery plugin for Twitter」

twitterのタイムラインをブログに載せたい時、jQuery plugin for Twitterならさくっと導入できます。

via:jQuery plugin for Twitter

ガラガラと要素を切り替えられるJavaScript「jQuery flips plugin」サンプル

ガラガラと要素を切り替えられるJavaScript「jQuery flips plugin」

表示領域が少なくても、いろんな要素を見せたい時があります。 そんなとき要素を上下左右にガラガラと切り替えられるjQuery flipsを利用すると便利です。

via:jQuery flips

画像にキャプションなどを自動表示するJavaScript「Captions」サンプル

画像にキャプションなどを自動表示するJavaScript「Captions」

画像にキャプションをつけておくと、ユーザーにはわかりやすくなります。 jQueryプラグインのCaptionsを使用するとaltに記述するだけで自動的にキャプションを表示してくれます。

via:Captions

飛行機の発着ボードみたいにガラガラっと表示するJavaScript「jQuery Flight Board」サンプル

飛行機の発着ボードみたいにガラガラっと表示するJavaScript「jQuery Flight Board」

飛行場でガラガラと音をたて、切り替わる発着ボード。 あの切り替えをJavaScriptで実現します。

via:jQuery Flight Board

twitterぽく何分前を表示するJavaScript「timeago: a jQuery plugin」サンプル

twitterぽく何分前を表示するJavaScript「timeago: a jQuery plugin」

twitterではそれぞれのtweetが何分前や何時間前などを表示します。 それと同じようなことがJavaScriptのjQueryプラグイン「timeago: a jQuery plugin」で実現可能です。

via:timeago: a jQuery plugin

JavaScriptでtwitterぽいインフォメーションバーを作る「jQuery notify bar」サンプル

JavaScriptでtwitterぽいインフォメーションバーを作る「jQuery notify bar」

twitterでプロフィールを更新した際に上に出るあれ。 jQuery notify barで、実現します

via:jQuery notify bar

テーブルの内容をグラフで表示するJavaScript「graphTable」サンプル

テーブルの内容をグラフで表示するJavaScript「graphTable」

テーブルで表組みを作って、それにあわせて画像でグラフを作る・・・ そんな作業は億劫です。 なので、jQueryプラグイン「graphTable」を使用して、楽をしましょう。

via:graphTable

jQueryでtwitterで@がついたのを表示するプラグイン「Twitter Mentions」サンプル

jQueryでtwitterで@がついたのを表示するプラグイン「Twitter Mentions」

twitter系のJavaScriptではタイムラインを表示するケースが多くなっています。 そんな中、jQuery Twitter Mentionsは、@でリプライされたものを表示してくれます。

via:jQuery Twitter Mentions

jQueryで複数ユーザーのtwitterタイムラインを表示する「A jQuery Twitter Ticker」サンプル

jQueryで複数ユーザーのtwitterタイムラインを表示する「A jQuery Twitter Ticker」

その名の通り、JavaScriptライブラリのjQueryでtwitterタイムラインを表示します。 単一ユーザーというのは多くありましたが、A jQuery Twitter Ticker -- Tutorialzineは複数ユーザーにも対応しています。 またデザインもキレイなので、使いやすいかもしれません。

via:A jQuery Twitter Ticker -- Tutorialzine

要素をハイライト表示にして目立たせるJavaScript「jQuery Highlighter」サンプル

要素をハイライト表示にして目立たせるJavaScript「jQuery Highlighter」

本当は見てもらいたいのにヒートマップなど解析ツールで分析すると見られていない、クリックされていないことはありませんか。 jQueryプラグインのjQuery Highlighterを使用すると要素をハイライト表示させられるので、有効な解決策となりそうです。

via:jQuery Highlighter

「こっち見んなwww」を実現するJavaScript「jEye」サンプル

「こっち見んなwww」を実現するJavaScript「jEye」

マウス位置に画像を向けるJavaScript「jEye plugin」です。JavaScriptライブラリのjQueryを使用しています。 まったくのネタではありますが、どこかで使用方法が・・・

via:jEye plugin

jQueryでFlashっぽいローディングを表示させられる「QueryLoader – preload your website in style」サンプル

jQueryでFlashっぽいローディングを表示させられる「QueryLoader – preload your website in style」

Flashでは、表示が重いときにローディング画像を見せることがあります。 これをJavaScriptでも実現したのがjQuery「QueryLoader -- preload your website in style - Gaya Design」です。

via:QueryLoader -- preload your website in style - Gaya Design

JavaScriptライブラリ「jQuery」でカレンダーを作る「FullCalendar」サンプル

JavaScriptライブラリ「jQuery」でカレンダーを作る「FullCalendar」

JavaScriptライブラリの「jQuery」を使用してカレンダーを作ります。

via:FullCalendar - Full-sized Calendar jQuery Plugin

friendfeedのストリームを表示するJavaScript「FriendFeed JSONP Widget」サンプル

friendfeedのストリームを表示するJavaScript「FriendFeed JSONP Widget」

ライフストリーミング・サービスfriendfeedはtwitterに負けずに伸びてきています。 そのfriendfeedストリームをjQueryプラグイン「FriendFeed JSONP Widget」を使用して、表示させてみます。

via:FriendFeed JSONP Widget

お手軽に要素を切り替えるJavaScript「Quovolver | a simple jQuery plugin for revolving quotes」サンプル

お手軽に要素を切り替えるJavaScript「Quovolver | a simple jQuery plugin for revolving quotes」

要素を一定時間で切り替えるサイトが多く見られるようになりました。 自分もそんな風にしたいという方は、まず「Quovolver | a simple jQuery plugin for revolving quotes」でお手軽に導入してみてはいかがでしょうか。

via:Quovolver | a simple jQuery plugin for revolving quotes

jQueryで斜めにもスライドさせる:via jQuery faux-3D Viewportサンプル

jQueryで斜めにもスライドさせる:via jQuery faux-3D Viewport

横や縦へ要素をスライドさせるのはなんとなくわかる。 でも斜めにはどうやって?という方にその方法を紹介します。

via:nemoorange.com: jQuery faux-3D Viewport

jQueryでホバーされていない要素を半透明にする:via Using Opacity to Show Focus with jQueryサンプル

jQueryでホバーされていない要素を半透明にする:via Using Opacity to Show Focus with jQuery

要素のホバー時に、その兄弟要素を半透明にすることで、ユーザーの視線がホバーされたものにだけ移るので、注目されやすくなります。 わりとjQueryの初歩的な使い方かもしれませんが、備忘録的に紹介します。

via:Using Opacity to Show Focus with jQuery

jQueryでtwitterタイムライン表示「Twit - Display Twitter Tweets on a Blog.」サンプル

jQueryでtwitterタイムライン表示「Twit - Display Twitter Tweets on a Blog.」

何個かJavaScriptによるtwitterタイムラインの表示を紹介しましたが、これはわりといいかもしれません。
jQueryプラグイン「Twit」です。

via:Twit

jQueryで要素を動かして印象的にする:via Crafting an Animated Postcard With jQueryサンプル

jQueryで要素を動かして印象的にする:via Crafting an Animated Postcard With jQuery

昨今Tori's Eyeのように要素をJavaScriptで動かしているサイトを多くみます。 今回はjQueryを使用して要素を動かす方法を紹介します。

via:Crafting an Animated Postcard With jQuery

長くなったコードをJavaScriptでぐいっと伸ばす via:Making an Expanding Code Boxサンプル

長くなったコードをJavaScriptでぐいっと伸ばす via:Making an Expanding Code Box

コードを書くときに改行をしないと、非常に横長になることがあります。 改行すると見やすくないし・・・というような時に、のばして表示できると便利です。

via:Making an Expanding Code Box

JavaScriptで短縮URLを実現する「jq-shorten」」サンプル

JavaScriptで短縮URLを実現する「jq-shorten」

twitter普及とともに短縮URLも広がっています。 JavaScriptライブラリjQueryプラグインの「jq-shorten」を利用するとお手軽に短縮URLっぽくできます。

via:jq-shorten

簡単にFAQを作れるJavaScript「jQuery Simple FAQ」サンプル

簡単にFAQを作れるJavaScript「jQuery Simple FAQ」

サイトにはFAQページは必須となりつつあります。
検索機能もつけたFAQをjQuery Simple FAQで簡単に作りましょう。

via:jQuery Simple FAQ

div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」サンプル

div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」

ページのレイアウト幅をがっちりと決めると、ユーザーに不便させる可能性があります。 jQueryプラグインのIngeny Splitterを使用するとドラッグでページレイアウトを自由にユーザーが調整できるようになります。

via:Ingeny Splitter

twitterタイムラインをJavaScriptで簡単に表示する「monitter」サンプル

twitterタイムラインをJavaScriptで簡単に表示する「monitter」

monitter」は、わずか3行でtwitterのタイムラインを表示することができるJavaScriptです(要:jQuery)。 導入が簡単なので、お手軽に始めたい方にお勧めです。

via:monitter

twitterタイムラインをJavaScriptで表示「jQuery jqtwitter」サンプル

twitterタイムラインをJavaScriptで表示「jQuery jqtwitter」

話題なのか話題じゃないのか微妙なtwitterのタイムラインをJavaScriptで表示してみます。

via:jQuery jqtwitter

JavaScriptで独自マウスジェスチャーを作れる「jQuery Fancy Gestures」サンプル

JavaScriptで独自マウスジェスチャーを作れる「jQuery Fancy Gestures」

マウスを一定の方向に動かすことにより、特定の動作をさせるマウスジェスチャー。 jQuery Fancy Gesturesでは、これをオリジナルで作ることができます。

via:jQuery Fancy Gestures

floatさせた要素を上手い具合に整列させてくれるJavaScript「jQuery Masonry」サンプル

floatさせた要素を上手い具合に整列させてくれるJavaScript「jQuery Masonry」

CSSでfloatさせると要素の高さによっては、想定していたように並ばないことがあります。 そんな時にはjQuery Masonryを使用すれば、まず水平方向に合わせた後、垂直方向にもあわせるので、綺麗に要素を整列できます。

via:jQuery Masonry

JavaScriptで絵文字を表示させる「Emotions toggle」サンプル

JavaScriptで絵文字を表示させる「Emotions toggle」

コメント欄などでかわいい絵文字が使用できると、華やかになります。 JavaScriptライブラリjQueryのプラグインEmotions toggleを利用すると簡単に導入できます。

via:Emotions toggle

JavaScriptライブラリjQueryで指定要素を目立たせるプラグイン「expose」サンプル

JavaScriptライブラリjQueryで指定要素を目立たせるプラグイン「expose」

フォームなどでは入力中に周りに余計なものが見えると入力がしにくかったりします。 そんな時はjQueryプラグイン「expose」を使用すると、目立ってわかりやすくなります。

via:expose

JavaScriptライブラリjQueryで指定要素を探し出すプラグイン「seek」

WEBサイトはいろいろな要素によって成り立ちます。 そのため、どこに何があるのかユーザーに知らせるのが難しくなります。 そんな時、jQueryプラグインのseekを利用すると指定要素を明示してくれます。

via:seek

wysiwygエディターをjQueryプラグインで簡単導入「jQRTE」

フォームなどユーザーに入力をさせる部分にwysiwygが利用できるとユーザーの表現が広がります。 これにともない、コンテンツもリッチになるかもしれません。 敷居が高いと思われるwysiwygエディターもjQueryプラグイン「jQRTE」を利用するとあっという間に導入できます。

via:jQRTE

コナミコマンドをサイトに埋めこめられるJavaScript「Cheat Code: a jQuery Plugin」

懐かしのコナミコマンド・・・あなたのサイトでも実現しませんか? JavaScriptライブラリのjQueryプラグイン「Cheat Code: a jQuery Plugin」を使用すると簡単に実現可能です。

via:Cheat Code: a jQuery Plugin

JavaScriptライブラリjQueryで、ちらみせエフェクトサンプル

JavaScriptライブラリjQueryで、ちらみせエフェクト

過去2度、ちらみせJavaScriptを紹介しましたが、もっと簡単に実現してみましょう。 JavaScriptライブラリjQueryを使用したサンプルです。

via:Simple Page Peel Effect with jQuery & CSS

簡単にバーコードを作れるJavaScript「jquery-barcode」サンプル

簡単にバーコードを作れるJavaScript「jquery-barcode」

どこで使用するか不明ですが、バーコードを手軽に作れるJavaScriptjquery-barcodeの紹介です。

via :jquery-barcode

テーブルの表組みにページネーションをつけるJavaScript「Table Pagination」サンプル

テーブルの表組みにページネーションをつけるJavaScript「Table Pagination」

たまに数十列を表示する表組みに出くわすことがあり、辟易することがあります。 そんな時は、所定の件数で次を見るというようなページネーションをつけられるjQueryプラグインTable Paginationを使いましょう。

via :Table Pagination

jQueryでRSSの登録をユーザーに促すJavaScript「jQuery Feed Menus」サンプル

jQueryでRSSの登録をユーザーに促すJavaScript「jQuery Feed Menus」

ブログが普及し、RSSを配信しているサイトは増加の一途をたどっています。 しかし、RSSリーダーに登録いただく方法はあまり上手くないです。 jQuery Feed Menusを利用すると、ユーザーに配慮した形で登録を促すことが出来ます。

via :jQuery Feed Menus

グラフにトレンドラインも加えたJavaScript「jqPlot」」サンプル

グラフにトレンドラインも加えたJavaScript「jqPlot」

JavaScriptでグラフを作成する手法はいくつか紹介しました。例)JavaScriptでグラフを作成するサンプル jqPlotは、グラフに加えトレンドラインも自動で表示させてくれます。

via :jqPlot

jQueryで時間をカウントダウンするJavaScript「jCountr」サンプル

jQueryで時間をカウントダウンするJavaScript「jCountr」

ティザーサイトなどで、あと何秒でオープンみたいな表示があります。 JqueryプラグインjCountrを使用すると似たようなカウントダウンが可能になります。

via :jCountr

角丸もグラデーションも付けてしまうJavaScript「Round Corners jQuery Plugin」サンプル

角丸もグラデーションも付けてしまうJavaScript「Round Corners jQuery Plugin」

最近は角丸やグラデーションが多用されていますが作るのはなかなかの手間です。 JavaScriptのRound Corners jQuery Pluginを使用すると、そんな手間を省くことが出来ます。

via :Round Corners jQuery Plugin

関連性をビジュアライズするJavaScript「jConnecter」サンプル

関連性をビジュアライズするJavaScript「jConnecter」

WEB上で「AとBは関連性があるがCとはない」と表現することがあった場合、画像編集ソフトを使用するしかありませんでした。 jQueryプラグインのjConnecterを利用すると、簡単に表現することができます。

via :jConnecter

要素を3D回転させるJavaScript「jQuery Plugin: rotate3Di」サンプル

要素を3D回転させるJavaScript「jQuery Plugin: rotate3Di」

クリック時やマウスオーバー時に何かしらの変化を与えることで、ユーザーの興味を喚起することができます。 それを、3D回転のエフェクトでやるとユーザーに驚きを与えることができるのではないでしょうか。 jQuery Plugin: rotate3Diを使用すると簡単にできてしまいます。

via :jQuery Plugin: rotate3Di

株価の表示みたいなニュースティッカーJavaScript「jStockTicker plugin」サンプル

株価の表示みたいなニュースティッカーJavaScript「jStockTicker plugin」

株価が流れて表示されるように、一列で情報を流し続けることで、注目を得られます。 また、多くの情報提供することができます。 JavaScriptライブラリのjQueryプラグインのjStockTicker pluginで簡単に導入可能です。

via :jStockTicker plugin

gccolor

簡単にスライダーを作成できるJavaScript「jFlow」

スライダーがあると非常に便利ですが、結構利用するのは難しかったりします。 jQueryプラグインの「jFlow」を利用すると簡単にスライダーが作成できます。

via :jFlow

gccolor

ハイクオリティなカラーピッカーJavaScript「GcColor」

色を選択させることはあまりないでしょうが、そんな要素だからこそリッチにしておくとユーザーの印象も変わるでしょう。 jQueryプラグインのGcColorは、jQuery UIを使用するなど、操作面でハイクオリティなカラーピッカーとなっています。

via :GcColor

(mb)ContainersPlus

フロートウィンドウを作成するJavaScript「(mb)ContainersPlus」

ある部分だけ目立たせたいけど、ユーザーの邪魔にならないよう閉じられるようにしたい。 誰しもがもつ欲求をかなえてくれるのが、jQueryプラグイン「(mb)ContainersPlus」です。 移動、リサイズなどが可能なフロートウィンドウをJavaScriptで作成できます。

via :(mb)ContainersPlus

jnewsTicker

目をひきつけるニュースティッカー:jQueryプラグイン「BBC style news ticker」

ニュースティッカーにはいろいろな種類がありますが、今回紹介するjQueryプラグイン「BBC style news ticker」は、かなり目をひきます。 1文字1文字点滅しながら表示されるので、目立つ&うざがられること間違いないでしょう。

via :BBC style news ticker

jnewstickerpro

ニュースティッカーをjQueryプラグイン「News Ticker Pro」で作る

お知らせをいっぱい表示させたいが、スペースの都合もある。 そんな時ニュース系サイトでよく見られる1件1件ニュースを表示するニュースティカーを使うと便利です。 JavaScriptライブラリjQueryのプラグイン「News Ticker Pro」で簡単に設置できます。

via :News Ticker Pro

jepiclock

JavaScriptライブラリjQueryで綺麗な時計を作る「epiclock」

サイトに時計を表示させたい。 単純に数字を出すだけでは味気ないので、今回紹介するepiclockのように画像で見せるのはいかがでしょうか。 JavaScriptライブラリjQueryで手軽に実現可能です。

via :epiclock

jturn

ページをめくるようなエフェクトJavaScript「The Sexy Curls jQuery Plugin」

チラ見せしちゃうJavaScript「Page Peel」に引き続き、ページをめくるような表現をつけられるJavaScript「The Sexy Curls jQuery Plugin」です。 これにより、効果的に広告やコンテンツを見せることが可能です。

via :The Sexy Curls jQuery Plugin

jslidebox

コンテンツをスライド表示させるJavaScript「Slide box」

デザインの都合上、省きたいが、でもこのコンテンツ入れたい。。。 そんなサイト制作者の葛藤を解消してくれるのが、Slide boxです。 最初は隠しておきながら、ボタンを押すとエフェクトつきで表示されます。

via :Slide box

jpageSlide

別コンテンツをスライド表示するJavaScript「Page Slide」

別のhtmlなどのコンテンツを表示するにはiframeなどがありますが、好ましくありせん。 今回のPage Slideは、簡単かつ刺激的な動きで別コンテンツを表示することができます。

via :Page Slide

jSexyvote

チラ見せしちゃうJavaScript「Page Peel」

最近チラッと広告やコンテンツを見せて興味を喚起するサイトがあります。 jQueryプラグインの「Page Peel」はそれを実現してくれるJavaScriptです。

via :Page Peel

jSexyvote

jQueryで星型投票を実現させる「Sexy Vote jQuery plugin」

ユーザーを巻き込むため、投票を導入するケースがあるでしょう。
そのとき、視覚的に見せられるとより効果的です。
Sexy Vote jQuery pluginは星型の投票システムをjQueryで実現させてくれます。

via :Sexy Vote jQuery plugin

jAutoColumn

英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」

WSJなどの英字新聞風なコラムを作るJavaScript「Columnizer」です。 流行のJavaScriptライブラリ「jQuery」を利用して手軽に作成可能です。 日本語でも簡易的なコラムレイアウトとして使用可能でしょう。

via :Columnizer

jaddSizes

ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」

pdfなどをリンクさせる時ファイルサイズを表示させる場合があります。 そんな時、いちいちファイルサイズを調べるのは面倒です。 addSizesはそんな面倒を取り除いてくれるjQueryプラグインです。

via :addSizes

jGrid

心地よく要素を切り替えるJavaScript「jFlip」

画像ギャラリーでは切り替え方は様々あります。 jQueryのプラグインであるFlip!では、くるくると心地よく切り替えが出来るほか、画像以外の要素もくるりと切り替えられます。

via :Flip!

jGrid

スクロールしてもついてくる!のJavaScript「jQuery Scroll Follow」

ページが縦に長くなるとサイドメニューとかが見えなくなってしまいます。それを防ぐ方法としてabsoluteやfixedするケースがあります。jQuery Scroll FollowではjQueryを使用し、スムーズについてきます。

via : jQuery Scroll Follow

jGrid

3ステップで表をソート&値を検索できるjavascript「dataTables」」

サイト制作でよく使用するものの一つにテーブルで作成する表だと思います。しかし、その整理方法は面倒で、縦に長くなると見づらくなります。今回紹介するDataTablesはjQueryを使い簡単に表をソートさせたり、値を検索したり、表示する項目数を調整できます。

via : DataTables

jGrid

表を彩るjavascript「jQuery Grid Plugin」

テーブルで作成した表は項目が多くなると見づらくなります。 また横幅が限られる環境では2行に渡ってしまったり、フォントサイズを小さくしなければいけません。 jQuery Grid Pluginは項目の幅をスライドできたり、行ごとの色をスタライプ状に変更したり、クリック/ダブルクリック時にも色を変化させられます。

via : jQuery Grid Plugin

jTableHover.gif

表を読み取りやすくするjavascript「tableHover plugin」

サイトでは表をテーブルで作成することが多いですが、縦横に項目が増えていくと、どこを示しているのか判別しづらくなります。 tableHover pluginを利用すると、マウスを載せた(またはクリックした)セルを着色することができ、読み取りやすい表を作成することができます。

via : tableHover plugin

JDandR

ドラッグ&リサイズが可能なjavascript「jqDnR」

限られたスペースで多くのコンテンツを詰め込みたいという葛藤は永遠の課題でしょう。 また、訪問者が自由なレイアウトを組めるようにするのは良いことかもしれません。 そこで、ドラッグ&リサイズ可能なjavascriptjqDnRを紹介します。

via : jqDnR

jEasyDrag

要素を簡単にドラッグできるjavascript「EasyDrag jQuery Plugin」

要素をドラッグすることがあるかもしれません。 そんな時はEasyDrag jQuery Pluginを利用すれば簡単に実現できます。

via : EasyDrag jQuery Plugin

j3DRotator

3Dでぐるぐる回るjavascript「jquery 3d rotator」

実用性はあまりないかもしれませんが、リンクが3Dで面白い動きをするjquery 3d rotatorです。商品画像にリンクを張ることで回転式の陳列が可能になるかもしれません。

via : jquery 3d rotator

jIframef

iframeをValidに表示する(?)javascript「JQuery iFrame Plugin」

ページに外部ページを表示させる方法にiframeがありますが、XHTML 1.0 StrictやXHTML 1.1で「非推奨要素・属性」となっています。 JQuery iFrame Pluginを使用すれば、これをクリア(多分)しつつ、iframeが使用できます。

via : JQuery iFrame Plugin

jFlot

jQueryベースでクールなグラフを作成するjavascript「Flot」

PlotkitやPlotorなど各ライブラリにはそれぞれ奇麗なグラフを作成できるプラグインがありました。 jQueryでもFlotとよばれるクールなグラフを作成できるプラグインが登場しました。

via : Flot

jChart

jQueryベースのグラフ作成javascript「Chart Plugin」

サイトでグラフを作成する場合のはなかなか面倒です。 Chart PluginはjQueryベースで簡単にグラフを作成できます。

via : Chart Plugin

jDrawing

シンプルな図や円を手軽に描けるjavascript「Library for simple drawing with jQuery」

線で丸や四角などの図をWebでも描きたいと思う人は多いでしょう。 しかし、これまでWebで完結するのは簡単にはいかないことが多かったです。 Library for simple drawing with jQueryは、線や丸、四角などのシンプルな図形を簡単に描くことのできるjavascriptです。

via : simple drawing with jQuery

jAjaxContent

Ajaxにコンテンツを読み込むjavascript「jQuery ajaxContent」

Web2.0と言われ、外部コンテンツをAjaxに表示するようなサイトが増えました。 jQuery ajaxContentはそれを可能にするjavascriptです。

via : jQuery ajaxContent

jCorners

角丸をJavaScriptライブラリjQueryで作る「jQuery Corners」

サイトを作っていると角が四角いレイアウトが多くなり、角ばった印象を与えます。 そこで角をとる「角丸」が多く使用されますが、今回はそんな角丸をJavaScriptで簡単に実現します。 jQuery Cornersは流行のUJavaScriptライブラリ「jQuery」のプラグインです。

via : jQuery Corners

jCurvyCorners

jQueryベースの角丸javascript「JQuery Curvy Corners」

要素の角を丸く表示するページが増加しています。 JQuery Curvy Cornersでは、以前紹介した角丸作成javascript「curvyCorners」をjQueryベースに移植しています。

via : JQuery Curvy Corners

jCorner

jQueryベースの角丸javascript「jQuery Corner」

角丸を作成できるjavascriptは多いですが、ここまで角の形の種類が多いのも珍しいかもしれません。 jQuery Cornerの基本角は8種類と豊富です。

via : jQuery Corner

jDorpShadow

何にでも影を付けられるavascript「Drop Shadow」

文字や画像に影を付けると浮き上がって見えるので、インパクトがあります。 ただし加工するのは面倒でした。 Drop Shadowではほんの少しの手間でテキストはもちろん画像、ボタンまですべてに影を付けることが出来ます。

via : Drop Shadow

jPager

ページを指定要素で分割するjavascript「pager」

ページを作成する際にどうしても長文になってしまうことがあります。 しかし、内容自体は繋がっているので、なるべくなら単一ページに収めたい。。。 そんな我が儘をpager jQuery plug-inは、ページを指定要素で分割し、解決してくれます。

via : pager jQuery plug-in

jScrollToMin

スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」

スライドさせるjavascriptは多くありますが、1章1節・・・3章5節というふうに階層が深くなるものには対応していないのがほとんどです。 jQuery.LocalScrollは、多階層に渡るスライド間をいい感じにスクロールします。

via : jQuery.LocalScroll

jPrintArea

印刷範囲を指定できるjavascript「jPrintArea」

印刷時にナビゲーションなどのいらない部分を省略したい時があります。 CSSを分けることで可能ですが、いちいち別のファイルを作成するのも面倒です。 jPrintAreaでは簡単に印刷範囲を指定することができます。

via : jPrintArea

jCodaSlider

コンテンツをスライド表示するjavascript「Coda-Slider」

Web上には無限大のスペースが広がっています。 しかし、コンテンツの多さ=見やすさには決してなりません。 coda-sliderは多くなってしまったコンテンツをスライドのように表示することで、見やすさも得ることができます。

via : coda-slider

jGradient2

自由自在にグラデーションを付けるjavascript「jQuery gradient」

背景などにグラデーションを使う際に、画像を一切使用しないjavascriptです。 jQuery gradientは要素のサイズを大きくしても表示が速度が遅くならないjavascriptです。

via : jQuery gradient

jGradient

要素にグラデーションをかけるjavascript「Gradient」

背景などにグラデーションを使うサイトが増加しています。 しかし、グラデーションを使用する為に画像を作成しなければなりません。 Gradientは背景画像を使用せずにグラデーションをかけることができます。

via : Gradient

jFeed

RSSとATOMフィードをparse(解析)するjavascript「jFeed」

ブログの浸透とともに、RSS(ATOM)フィードを発信するサイトが増えています。 これらのフィードをHTMLで表示するjavascriptがjFeed: JavaScript jQuery RSS/ATOM feed parser pluginで公開されています。

via : jFeed

jInnerFade

ニュースティッカーを作成するjavascript「Innerfade with jquery」

Web上では、ニュースを次々と流すニュースティッカーと呼ばれる手法があります。 これを導入することで限られたスペースで動きのあるコンテンツ表示を可能にします。 MedienfreundeInnerfade with jqueryを使用すれば、このニュースティッカーを表示することができます。

via : Innerfade with jquery

jNewsTicker

jQueryベースのニュースティッカーjavascript「liScroll」

サイトの更新履歴などを省スペースでなるべく多くかつ注目を浴びるように表示したい場合は、ニュースティッカーを用いることがあります。 liScrollはjQueryで簡単に作れるニュースティッカーjavascriptです。

via : liScroll

jChili

コードをハイライト表示するjavascript「Chili」

HTMLやJavascript、PHPなどのソースを紹介する時にはわかりやすい表示が求められます。 Chili Centralでは、コードをハイライト表示するChiliを公開しています。

via : Chili Central

jCodeViewer

コードの表示を整形するjavascript「jCodeViewer」

HTMLのタグには、HTMLやCSSなどを記述するところに使用するcodeと呼ばれるものがあります。 codeは閲覧する人に見やすい表示を心がける必要があります。 jCodeViewerでは自動でコードを整形してくれます。

via : jCodeViewer

jTagCloudf

ページ単位でタグクラウドを作成するjavascript「DynaCloud」

ブログが急速に広まり、記事を関連づけるタグという仕組みがひろまりました。 これにともないタグの量に応じてテキストの大きさを変えるタグクラウドも浸透しています。 DynaCloudではこれを単一ページで実現するjavascriptを公開しています。

via : DynaCloud

このエントリーを含むはてなブックマーク この記事をクリップ! Yahoo!ブックマークに登録 このエントリーをdel.icio.usに追加する