イメージギャラリーとスライダーに関するjQuery用プラグインがまとめられた記事。どちらも画像をDIVボックス内でスライドさせる点においては共通したテクニックですが、一言にスライド表現とは言っても、結構いろんな表現手法があるもんですね。これだけ数が揃ってるので、サイト内で行いたいトランジションに合ったものが見つかりそうです。
ブログのコメント欄や検索欄など、入力フォームにフォーカスしたタイミングで、ラベルがフェードアウトするJS。jQueryのプラグインだそうです。試しにフォームに入力しようとすると、“Name”などの初期入力文字がフェードして薄いグレーになります。入力を始めると完全に消え、入力した文字を消してフォーカスアウトするとまた復活します。フォーム横に“Name”とか書いておくよりもこっちの方がスマートですね。装飾面だけでなく機能的でもあるナイスなJS。
規模の大きいサイトでよく見るドロップダウンメニュー。メインメニューの下にサブメニューがぶら下がるタイプのサイトでは、ナビゲーションとして有効な手段です。この記事ではいろんなサイトのドロップダウンメニューを紹介して、中にはリンク先でソース配布しているものもあります。それぞれCSSのみ、jQueryを使ったもの、mootoolsを使ったものをはじめ、Prototypeなどその他のJSライブラリを使ったものなども紹介されてます。一言にドロップダウンメニューとは言っても、その動きやデザインによって使用感は随分変わるので、サイトに合った手法を探す時にナイスな記事。
Drop-Down Menu: 30+ Useful Scripts To Enhance Header Navigation
jQueryを使ったページスライド。いわゆるページ内の任意のDIVのコンテンツをスライドさせる表現ではなく、ページの外から別のDIVがニュっと出てくるもの。初期状態では非表示で、画面外からインタラプトしてくるという意味では、Lightboxのような使い方に近いかもしれません。ログインパネルやコメント欄としてもイイですね。ページ下部の“Click for a pageSlide demo.”をクリックする事でデモを見れます。JSを使ったちょっと変わった表現をしたい時にナイス。
ドロップダウンメニューやスライドメニューなど、動きのあるナビゲーション表現の好例が30個まとめられた記事。どのサイトのナビゲーションもクールにデザインされてます。使われているJSライブラリについては特に限定されてないので、モノによってjQueryだったりmootoolsだったりすると思いますが、重要なのはデザインやUI面での表現。デザイン性と使いやすさについて他者から学ぶという点で、この手の記事はとっても勉強になりますな。
jQueryを使って表現する、動くナビゲーションの紹介記事。デモはこちらから見る事ができます。早速触ってみたのですが、これめっちゃかっこイイっすね。以前はFlashでこういうのよくありましたが、JSでも似たような事ができます。ちゃんと戻りモーションも作ってあって、横方向に一気に触るとなんか気持ちがイイです。いずれ何かに使ってみたいな。
イメージに関するjQueryプラグインがまとめられた記事。Lightbox亜種、スライドショー、class指定によるサムネール装飾、トリミング、ドラッグ可能な画像の配置など色々紹介されてます。ちなみに左のサムネールはFancyboxというLightbox亜種です。なかなかかわいいです。
25+ Create Amazing Image Effects with Some of the Best jQuery Plugins Available
CSSとjQueryを使って装飾するドロップダウンメニュー。フェードやスライドなどの動きは特にありませんが、通常装飾しづらいパーツであるドロップダウンメニューをデザインしています。画像は使われてないようなので、CSSのプロパティーさえイジくれば配色は好きに変更できそう。地味になりがちなフォームページに一工夫したい時に是非ひとつ。
