視差とは何ですか？
「視差スクロール」という用語に慣れていない場合でも、おそらくこのテクニックに慣れているでしょう。 視差スクロールは、奥行きの錯覚を作り出す2Dアニメーションプロセスです。 前のレイヤーのアニメーションは、背景のアニメーションよりも高速です。 動いている車を観察すると、車の前にあるオブジェクトは車の後ろにあるオブジェクトよりも速く移動するように見えます。 視差スクロールでは、同じ原理を使用して、視聴者に3Dシーンを見ていると思わせます。
デモとダウンロード
私のデモページは、垂直視差スクロール効果を作成する1つの方法を示しています。
デモを見る
ソースをダウンロード
通常の方法でスクロールできます。ページの右側にあるナビゲーションメニュー、または各記事の下に表示される次/前のボタンを使用します。
このページには、深さの錯覚を作成するための4つの独立したアニメーションレイヤーが含まれています。
Safariでは、スクロールは（少なくとも私のコンピューターでは）スムーズに実行されますが、デモは最新のブラウザーで動作するはずです。
免責事項1：これは単なる実験であるため、モバイルデバイスで動作するようにデモを最適化しませんでした。
免責事項2：デモで使用されるナビゲーションメニューは、Nike Better World Webサイトでご覧いただけます。 サイトで同様のナビゲーションを使用する場合は、その起源に留意してください。
仕組み
記事と背景レイヤーには、CSSを使用して固定位置が割り当てられ、新しいレイヤーが背景レイヤーの上に表示されるように、z-indexプロパティも割り当てられます。 4つのレイヤーが使用されます：小さな雲、大きな雲、バルーン/風景画像、記事レイヤー。
/* ( / ) */ #parallax-bg3 { z-index: 3; position: fixed; left: 50%; /* */ top: 0; width: 940px; margin-left: -470px; /* */ }
各レイヤーには絶対配置があります。 これは、プロセス全体の中で最も難しい部分でした。要素は、4つの記事のいずれかにスクロールするときに、記事がブラウザウィンドウと同じ配置になるように配置する必要があるためです。 この場合、これは試行錯誤によって達成されました。
#bg3-1 { position: absolute; top: -111px; left: 355px; } #bg3-2 { position: absolute; top: 812px; left: 321px; } /* … */
視差スクロール効果を作成するには、jQueryを使用したわずか数行のコードが必要です。 私はそれがどれほど簡単かに驚いた。
$(window).bind('scroll',function(e){ parallaxScroll(); }); function parallaxScroll(){ var scrolled = $(window).scrollTop(); $('#parallax-bg1').css('top',(0-(scrolled*.25))+'px'); $('#parallax-bg2').css('top',(0-(scrolled*.5))+'px'); $('#parallax-bg3').css('top',(0-(scrolled*.75))+'px'); }
前景レイヤーは常にドキュメントの上部に揃えられ、他のレイヤーの動きは深さに応じて調整されます。
レイヤーが低いほど、動きは遅くなります。
残りのjQueryコードは、ナビゲーションを制御するために使用されます。 ユーザーがナビゲーションボタンを押すと、ページは対応する記事までスクロールします。 ユーザーがJavaScriptを無効にしている場合、リンクで使用される「アンカー」が機能します。 アニメーションなしでページ内を移動できます。
次のステップ
視差スクロール効果を作成する方法は他にもたくさんあると確信しており、私の経験がこの方法を探索するための出発点として役立つことを願っています。