twitter facebook hatena google pocket 画像をドットっぽく加工するとひと味違った見た目になり、印象的です それをjQueryでやってしまうプラグイン「SeuratJS」を紹介します。 sponsors 使用方法 SeuratJS - A Raphae"l plugin for creating beautiful pointillized animations.からファイル一式をダウンロード。 また、今回はRaphae"l―JavaScript Libraryも必要になるので、こちらもダウンロードしておきます。 <script type="text/javascript" src="raphael-min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></sc

twitter facebook hatena google pocket jQueryプラグインのgmaps.jsを利用すると簡単にGoogle Mapを作成できることできます。 またルート案内もできるので、駅から会社が少し離れていた場合の推奨ルートを表示してあげるのもいいかもしれません。 今回はこのルート案内を設定する方法を紹介します。 sponsors 使用方法 gmaps.jsをダウンロード。 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="

twitter facebook hatena google pocket メニューを円状に置けるとデザインの幅が広がり、面白い表現ができそうです。 jQueryプラグインのExtremes jQuery plug-inを利用すると簡単に実現できます。 sponsors 使用方法 Extremes jQuery plug-inからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="extremes.js"></script> <script> $(function() { $('.class名').extremes({ diameter: 25 //中心点からの距離 }); }); </script> あとは

twitter facebook hatena google pocket フルスクリーンで中央からスリットがはいったようなエフェクトをかけながら、画面切り替えが行えるFullscreen Slit Slider with jQuery and CSS3 | Codropsです。 CSS3を利用して非常にインパクトな表現を実現しています。 sponsors 使用方法 Fullscreen Slit Slider with jQuery and CSS3からファイル一式をダウンロード。 <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"

twitter facebook hatena google pocket 昨今流行っている視差効果（パララックス）を導入してみたい人は多いのではないでしょうか。 Prinzhorn/skrollrを利用すれば比較的簡単に導入可能です。 sponsors 使用方法 Prinzhorn/skrollrからファイル一式をダウンロード。 <script type="text/javascript" src="skrollr.js"></script> <script type="text/javascript"> skrollr.init(); </script> <link href="skrollr.css" rel="stylesheet" type="text/css" /> あとはdivの中にdataで高さとエフェクトを指定していきます。 <div data-0="" //高さ0px

twitter facebook hatena google pocket 画像などの要素をただ並べていくだけだとなんだか寂しい。 そんな時は徐々にフェードインさせてみてはいかがでしょうか？ champagne.jsはランダムに要素をフェードインさせてくれます。 sponsors 使用方法 champagne.jsからファイル一式をダウンロード。 下記のように要素が記述されているとします。 <ul class="class名"> <li><amp-img src="画像パス"></li> <li><amp-img src="画像パス"></li> <li><amp-img src="画像パス"></li> <li><amp-img src="画像パス"></li> </ul> これに対しCSSを適用。 .class名 div.hidden { display: none; } 最後にJav

twitter facebook hatena google pocket 画像を背景に敷き詰めることでインパクトのあるデザインになります。 これを実現するのがjQuery plugin: Fullscreen Background - Gaya Designです。 ウィンドウサイズにあわせて自動でフルスクリーンで表示してくれます。 sponsors 使用方法 jQuery plugin: Fullscreen Background - Gaya Designからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.fullscreenBackground.js"></script> <script>

twitter facebook hatena google pocket ちょっとマニアックな使い方かもしれませんが、印刷時にリンクをQRコード化してくれるjQuery.printQr() Pluginを紹介します。 画面では見せたくないけど、印刷した時に携帯とかで閲覧してみてもらいたい時に利用してみてはいかがでしょうか。 なお、対象リンクをhiddenにしても印刷時にQRは表示されるので隠しクーポンとかにも使えるかもしれません。 sponsors 使用方法 jQuery.printQr() Pluginからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.printqr.js"></scrip

twitter facebook hatena google pocket トップなどに省スペースで最新情報を次々に表示させているサイトがあります。 この、いわゆるティッカーをjQuery WebTickerならお手軽に表示させられます。 sponsors 使用方法 jQuery WebTickerからjquery.webticker.jsをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.webticker.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#id名").webTicker({ t

twitter facebook hatena google pocket サイトの使い方を見せるのはFacebookなども取り入れている昨今注目の方法です。 jQuery Joyride Feature Tour Pluginでは簡単にそれを実行でき、チュートリアルに利用できそうです。 sponsors 使用方法 jQuery Joyride Feature Tour Pluginからファイル一式をダウンロード。 <link rel="stylesheet" href="joyride-1.0.2.css" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.joyride-1.0.2.js"></script> 次

twitter facebook hatena google pocket サイト訪問から一定時間までをカウントダウン出来るjQuery Countrです。 これを用いると、制限時間を設けて何かをさせたりできそうです。 sponsors 使用方法 jQuery Countrからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="countr.js"></script> <script> $(function() { $('#id名').countr({ hours : 0, //時間 minutes : 0, //分 seconds : 30, //秒 toOpacity : 0.5, //透過 colorA

twitter facebook hatena google pocket ECなど表示スペースは限られているものの商品の細かい部分は見せたいという要望があると思います。 これを簡単・軽量なjQuery image zooming pluginが解決してくれます。 sponsors jQuery image zooming pluginからファイル一式をダウンロード。 <style> .zoomIcon { width:33px; height:33px; position:absolute; top:0; right:0; background:url(icon.png); } .zoom { position:relative; } .zoom amp-img { display: block; } </style> <script type="text/javascript" src

twitter facebook hatena google pocket 奥行き感を出しながら画像を回して表示させたい。 そんな時にはシンプルな記述で簡単導入できる「jQuery Rondell」を採用しましょう。 sponsors 使用方法 Sebobo/jquery.rondellからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.rondell.css" type="text/css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.rondell.js"></script> <script> $(function() { $('

twitter facebook hatena google pocket iOSみたいなスクロールバー表示があるとユーザビリティが向上されそうです。 NICESCROLLは、初期にスクロールバーを見せたのち、いったんフェードアウトさせられます。 またスマートフォンのタッチイベントにも対応しています。 sponsors 使用方法 NICESCROLLからファイル一式をダウンロードします。 <style> #id名 { height: 220px; overflow: auto; } </style> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.nicescroll.js"></script> <script> $(f

jQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavaScriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト／リンク関連、その他、日本語未解説のjQueryプラグインを分類して紹介しています。 初心者でもすぐにリッチなサイトを作成可能ですので、ぜひjQueryプラグインをご利用ください Image Menu Form Text/Link Other W/O_JP