ダイナミックに切り替わるページナビゲーション 一見するとシンプルなデザインのサイト「HUMAAN」。その魅力は、細部まで作り込まれたインタラクションにある。中でも目を引くのが、フルスクリーンで展開されるダイナミックな変形アニメーションだ。何気なく下部のメニューをクリックすると、ページ全体が大きく回転しながら切り替わる。その動きが非常に気持ちよく、コンテンツをうまく魅せる素敵な仕掛けだ。 この3D回転は、連載第1回「CSS Transitionsを使った3Dロールオーバーのアイデア」で紹介した3D変形と同じ仕組みで実装されている。今回は、3D回転によるダイナミックなコンテンツ切り替えについて、第1回の記事をヒントに再現してみよう。 STEP 1：3Dの構造を考える 最初に、ページ全体を回転させるため、ウィンドウと同じ大きさの2つの面（div要素）を用意し、transformプロパティで変形さ
最近はよくjQueryを使うのだが、他の人がどんな風に使っているかに興味がある。 もしあなたが同じように思っているならjQuerySTYLEが参考になるだろう。 このサイト、jQueryが使われているサイトのギャラリーである。 また、それぞれのサイトでjQueryのどの機能（Ajaxだとかナビゲーションだとか）が使われているかもアイコンで一目でわかるようになっている。自分の興味にあわせて覗いてみるといいだろう。 自分が使っているものを他の人がどう使っているか。そんなことに気づかせてくれるこうしたサイトはいいですね。
「ゼロからjQueryを学びたい人たち」が効率的に理解できるように、 1章から順に難易度が上がるステップアップ形式の解説を行っています。 また、jQuery初心者のデザイナーの視点を加えることで、 プログラミング未経験者の「つまずきやすいポイント」を押さえた内容になっています。 通常、サンプルコードは全て出来上がった状態で配布されますが、 本書ではあえて途中までのみを記載しています。 コードに余白を残すことで、サンプルをただなぞるだけではなく、 読み手の工夫次第で様々な表現を生み出すことができるようにしています。 最終章では、実際の仕事でデザイナーやエンジニアが手がけるWebサイトと同等のクオリティのページを制作します。 単なる技術の理解に終始せず、実際のサイトを制作する上でのポイントを習得することで、 Web制作における実践的な力が身につきます。 シフトブレインの取締役、テクニカルディレ
国内外を問わず、多くのECサイトがお手本とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」（回転表示するスライドパネル）の作り方を紹介しましたが（関連記事）、Amazonは優れたユーザーインターフェイス（UI）の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
