画像をダイナミックに配置し、それに負けないくらいダイナミックなアニメーションで画像を拡大表示するギャラリーのチュートリアルをCodropsから紹介します。

jQueryを使用して、LavaLampスタイルのナビゲーションを実装するチュートリアルをNettuts+から紹介します。 How to Build a Lava-Lamp Style Navigation Menu デモページ チュートリアルは当サイトでも数多く紹介していますが、コードの解説をはじめ、ステップごとの状態のキャプチャ、動画での解説と至れり尽くせりのチュートリアルとなっています。 LavaLampのスタイルもしっかりと作り込まれており、文言の幅に合わせてアニメーションでハイライトの幅が変更になります。

fontScaler marcup 特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」。 次のように、特定のブロックを $(element).fontScaler() のように初期化するとボタンがあらわれ、拡大縮小が簡単になるプラグインがあるようです。 フォントを大きくするボタンをおしたところ。結構大きくなって読みやすくなりました。 次のように、段階を追って拡大、縮小ができるようにする機能もあります。 これはありそうでなかった気がします。 全体に適用するとデザインが崩れてしまって嫌だ、という方も、記事部分だけならデザインは崩れない＆可読性を上げることができるので便利ですね。 関連エントリ 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル フォントサイズの変更をJavaScriptによって検地する方法

並列に配置されたナビゲーションの現在位置を明示したハイライトをアニメーションで移動させるスクリプトをCSS-Trickから紹介します。 jQuery MagicLine Navigation デモページ 現在位置を明示するサインは、ライン（キャプチャ：上）と背景（同：下）の2種類が用意されています。 また、背景は各ラベルでカラーが異なります。 ナビゲーションの実装はリスト要素をdiv要素で内包したシンプルなものとなっています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div class="nav-wrap"> <ul class="group" id="example-one"> <li class="current_page_item"><a href="#">Home</a></li> <li><a hr

jQuery Horizontal Menu Style 05 (Dark Green) クールにアニメーションする水平ドロップダウンメニュー実装jQueryライブラリ。 次のようなデザインでカーソルを変えるとアニメーションしながらフォーカスし、ドロップダウンメニューを表示させたりすることが出来るメニューのダウンロードが可能です。 ドロップダウンが表示される部分 メニューのカラーは全部で６種類から選べます 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 クールにアニメーションする色合い様々なjQueryメニューサンプル色々 縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」

<textarea name="code" class="html" cols="60" rows="5"> <div class="slidegrid"> <div class="cell bigcell">Big Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </textarea>

ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグイン３０まとめ 2010年01月26日- 30 Stylish jQuery Tooltip Plugins ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグインが３０種類もまとまったエントリのご紹介です。 jQueryだけでこれだけあるというのは驚きなのですが、ツールチップに迷った時とかのために参考に出来そうです。 個人的には、cssでデザインできてエレメントに属性を振っておくと自動で出てくるタイプのものがいいなぁと思います。あとはアニメーション効果などもカッコいいものがいいですね

jQueryで実装するアニメーション機能をよりスムーズにするプラグイン「hoverFlow」を紹介します。 demo 上記ページの「The Problem」のナビゲーションで、マウスを何回も上下に往復してみてください。 マウスを止めても、アニメーションが継続されてしまいます。 これを解消するために「.stop()」を使用したスタディがありますが、アニメーションがぎこちないものになっています。 そこで上記の問題を全て解決し、プラグインとしてリリースしたのが「hoverFlow」です。 ファイル容量も1KB（圧縮時）と軽量となっています。

jQueryでアニメーション機能を実装する際に使用する「.animate()」のスタディをCSS-Tricksから紹介します。 Fully Executing jQuery Animations Without Queuing demo デモでは、マウスのホバーをトリガーにアニメーションが始まり、そのアニメーションを止める際に「.stop()」または同様の機能をもつものをそれぞれ比較しています。 ゴールは、三つに並んだバーがそれぞれ期待通りによりスムーズに動くことです。 最もスムーズに動作するのは、デモページの下にあるグリーンのデモで下記のように記述しています。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $("#animate-test div").hover(function(){ $(this).fi

The documentation below is for version 1.5.1; see the release notes for the changes from previous versions. Download version 1.5.1 Demos Minimal vertical splitter: Demonstrates minimal code/markup needed to create a splitter. All the styles are included in the HTML file for this example. Vertical splitter: Vertical splitter with fixed height and fluid width. Horizontal splitter: Horizontal splitte

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B

スライド、フェード、ティッカーと三種類のモードが選択できる超軽量のコンテンツスライダーのスクリプトを紹介します。 bxSlider demo 各コンテンツはdiv, li, p要素でそれぞれ実装されており、スクリプトのオフ時にはそのまま表示されるようになっています。 スクリプトのオプションでは、三種類のモードの選択、オートとマニュアル、スピードなどが調整できます。 bxSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。

JavaScriptやCSSを使用して、スクロールした際にパネルを追従させるチュートリアルをCSS-Tricksから紹介します。 Scroll/Follow Sidebar, Multiple Techniques demo チュートリアルでは、JavaScriptで実装したアニメーション版、CSSで実装した版２つの計３種類が紹介されています。 サイドバーのリストをクリックすると、追従のパターンを変更できます。 実装はシンプルで、div要素でコンテンツとサイドバーを配置し、サイドバーには「position: fixed;」を指定します。 CSS <textarea name="code" class="css" cols="60" rows="5"> #page-wrap { width: 600px; margin: 15px auto; position: relative; } #s

少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」が公開されています。 小さな枠を３分割させてページをスライドさせるなど動きとしてもおもしろいコンテンツスクローラーになっています。 少ないスペースに色々なコンテンツを置くような場合に参考にできそうです。 デモページを見るとその凄さが分かる筈。 jQueryなので次のように実装も超簡単です。 $('#flips1').flips( { autorun_delay:0, direction: 'left' } ); 詳細・ダウンロードは以下のページを参照してください。 FLIPS | jQuery Plugins

Determines whether a tooltip appears when hovering over the image. The tooltip text will be taken from the longdesc attribute value; if there is no longdesc attribute then no tooltip will show regardless of this setting.