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のプロパティーさえイジくれば配色は好きに変更できそう。地味になりがちなフォームページに一工夫したい時に是非ひとつ。
Javascriptで記述されたリズムマシンのウェブアプリ。型番からしてローランド・TR-909あたりがモデルなんでしょうか。JSの部分はJavascriptの事ですね。演奏方法は簡単で、横方向が時間軸となっていて、全体で1小節、黒とグレーで区切られた1マスが1拍、ボタン1つが16分音符を表しています。で縦方向が楽器の種類という構造。基本的な4つ打ちリズムを作りたければ、黒とグレーのマスの最初のボタンをそれぞれオンにすればオッケー。ちなみにBPMは固定です。リズムができたら右上の再生ボタンでプレイ開始。再生中にもオーサリングできるので、試行錯誤しながらリズムを組み立てられます。ウェブでの表現としてはなかなか興味深い試みですね。
CSSレイアウトが一般的になって以来、それまでに比べると記述する機会のグっと減ったテーブルタグ。テーブルアレルギーからか、本来の目的である表を書く時でさえ使わない人もいます。自分の場合はサイト内に表が必要な時はわりとサクっと使っちゃうんですが、こちらではテーブル装飾の好例が紹介されてます。また併せて使用する事で効果的なJavascriptについての記述もあります。プランやモデル比較、計算式なんかでのクールなテーブルの見せ方はなかなか勉強になります。
HTML Table Building: 30+ Beautiful Examples And Useful Javascripts
「jQueryよりイイんじゃね？」というmootools用プラグインのまとめ記事。実際に海外のウェブサイトで多く使われているのは、jQueryの次にmootoolsという印象があります（根拠ないですが）。mootoolsにも多数のJSプラグインが出ていて、それらを一覧にして紹介してます。両者共に同じような事はだいたいできるな、という印象なんですが、JSに詳しい人に言わせれば色々とあるのかもしれません。自分にとってはサッパリですが、デザイナーやディレクターの人も、「だいたい何ができるか」くらいは把握しておいて損はないですね。
Best Ever 65 mooTools Plugins and Demos, is it Better than jQuery?
