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ライブラリにはjQueryが使われているようです。最近だとスマホ対応が当たり前になっているので、サイト内でスライダー用意したい時にとってもナイスです。
jQueryのプラグインを紹介するブログ。結構長く続いてるようで、紹介されているプラグインの数がはんぱないです。各プラグインはカテゴリ分けされているので、目的がハッキリしている場合のプラグイン探しにも重宝しそうです。これだけ数があればだいたい何でも揃うんじゃないでしょうか。探しものの際に是非これひとつ。
レスポンシブレイアウトに対応し、かつタッチデバイスでも操作のしやすいLightbox。ってかLightboxってすでに一般名詞になってるんスね。もうちょい広い意味での言葉を使えばModal表示と言えばいいんでしょうか。タッチデバイスでも使いやすいという事でiPhoneでも見てみましたが、これイイですね。スワイプ操作で次の写真を見る事ができ、キャプション表示などのオプションも充実してます。デモページはこちら。JSライブラリとしてjQueryが使われているようです。
jQueryやCSS3を使って作られた、クールなナビゲーションメニューの作例を64個集めたまとめ記事。ロールオーバーアクションに凝ったもの、アコーディオン、ドロップダウンメニュー、レスポンシブレイアウトに対応したナビゲーションなど色々あります。ナビゲーションメニューってサイト内でも特に大事な要素なので、凝った表現をしたい時の作例探しにナイスです。
