HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
ナイキ、アディダス、グーグルも採用！人気のデザイン表現“パララックス効果”の仕組み
ナイキやアディダス、グーグルなど先進的なデジタルキャンペーンで知られる企業が先んじてウェブサイトに取り入れている表現手法があります。それが“パララックス効果”です。まずは、その効果を体験いただければと思います。 パララックス効果の名を世に知らしめた「NIKE BETTER WORLD」 このウェブサイトの役割は、ナイキのCSR活動を広くPRすること。米広告代理店「Wieden+Kennedy」や、デザインディレクターIan Coyle氏らが製作を手がけており、サイトでは環境負荷が小さくなるよう開発されたThe Free TR Fit、100%リサイクルされているシューズボックスなどが紹介されています。 人間の視点をずらすことで、奥行きを感じさせる 先ほどのNIKE BETTER WORLD、サイトに“奥行き”を感じませんでしたか？3D技術を使っているわけでもないのに、平面であるはずのウェブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
