CSS3とjQueryを使って作る、フルスクリーンのスクローラー。ウィンドウをスクロールしようとすると、ブラウザウィンドウの縦幅単位でスクロールするアレです。最近じゃAppleなんかも製品ページとかでよく使ってますね。ページ右端には各ページへのダイレクトリンクも用意されており、各ページにはアンカーで飛べる仕組みになっているので、固定リンクも可能。ソースコードはGithubから一式ダウンロードできるようです。全画面背景画像とか、パララックススクロールあたりと組み合わせるのも良いですな。
モバイル向けサイトやアプリでよく目にする3本線のメニュー。俗にハンバーガーメニューって言われますが、あれを実装できるJavascript。レスポンシブレイアウトのサイトでモバイル向けレイアウトになった時、それまでのグローバルナビがハンバーガーアイコンに収まるという手法はよく見かけますね。ただこの手法には結構賛否両論があり、「美しくない」という意見もよく目にします。個人的にはアレってAndroid App界隈限定での手法であって、WebやiOS Appにおいては全然一般的じゃなくね？とも思います。けどまぁサイトによってはこれの導入を求められる時もあるので、備忘録として残しておきます。
CSS3とjQueryを使ったタブメニューの作例を集めた記事。なんと85の作例がまとめられてます。よくタブメニューという限定されたテーマでこれだけ集めたな・・・と感心せざるを得ません。一般的な水平方向に並んだタブ切り替えはもちろん、垂直方向でのタブ切り替え、アニメーションを併用したものなど色々あります。それぞれリンク先で導入法やデモなどが用意されてるので、タブの作例を探す際に使えそうです。
CSS3やHTML5、jQueryに関するチートシートをまとめた記事。世の中にはこういうの便利なものを作ってくれる人がいて、しかもそれぞれ印刷に向いてたりWebで探すのに便利なようにインデックス化されていたりして、色々と便利です。ものによっては的を絞った内容になっていて、例えばHTML5の文章マークアップだけにフォーカスしたチートシートなどもあります。印刷したりMacの壁紙にしたりブックマークしたり、色々な使い道がありそうです。
All The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuery
サイト内にこちらのコードを仕込む事で、もし旧式のブラウザでサイトを訪れるユーザーがいた場合にアラートを出してくれるというJS。「おめーの使ってるクソみてぇな石器時代のブラウザ、今すぐここからアップデートしやがれ」というような事をやんわりとユーザーに伝えてくれます。素晴らしいですね。ついでに言うと「IEなんてゴミみたいなもの使うのやめてChrome使えこのクソ虫が」的な事も言ってくれると色々助かるんですが。それはそうとトップページのデザインがなかなかイカしてます。それぞれのブラウザのシェアや現在のバージョンの情報が分かりやすく整理されてます。ちなみに俺はMacユーザーらしくSafariがメインで、Firebug目当てでFirefoxがセカンダリであります。ってかFirefoxとChromeのバージョン数スゴいな。
iOSやAndroidのネイティブアプリの動きを模した、WebApp制作のためのUIライブラリ。サイト内にあるスマホの外観部分は実際に動いており、これが動作デモになっています。けどPCよりもスマホで直接見た方が分かりやすいです。これ使えばWebAppをネイティブAppみたく振る舞わせる事ができますね。iOSとAndroidそれぞれのルック＆フィールに対応してる点もナイスです。
PDFファイルをブラウザウィンドウ内で描画してくれるJavascript。PDFって見る側の環境次第で、ブラウザ純正のビューアで開いたり、Acrobatプラグイン内で開いたり、ダウンロードして開いたり、色々な挙動があると思うんだけど、これ使えばブラウザウィンドウ内で直接描画してくれるのでイイですね。プラグインも不要なのかもしれません（確認はしてません）。Demoボタンを押すと、実際にどう動くのか確認ができます。
レスポンシブ・レイアウトや、スマートフォンでのスワイプ操作に対応した多機能なイメージスライダー。いわゆるスマホなどのモバイルデバイス対応だけでなく、矢印キーでのスライドやオートプレイ、複数イメージのスライド、フェード効果を使ったトランジション、スライドの追加や削除、スライドのフィルタリングなど、既存のイメージスライダーに比べてもかなり多機能です。またJSライブラリにはjQueryが使われているようです。最近だとスマホ対応が当たり前になっているので、サイト内でスライダー用意したい時にとってもナイスです。
