この FullTossやASUS のようなウェブサイトについて話しています。
浮かんでいる要素のそれぞれが異なるペースでスクロールしているように見えることに魅了されます。また、ユーザーがページを上下にスクロールすると、背景がレイヤー化されてカーテンのように上昇し、以前は表示されていた要素が非表示になり、新しい要素が表示されます。
この効果を達成するために CSS/jQUery を書くことに頭を悩ませることができません。任意のヘルプ、または小さな実例が役立ちます!
編集：
「視差」効果を指摘してくれたAndrewとsevenseacatに感謝します。私は今、いくつかのウェブサイトがそれを使用していることを知っています.スクロールをループするこの非常識なサイトや、スクロールバーさえないこのRange Roverサイトを含みます!
Scott の回答は私の質問に直接答えているので受け入れましたが、Andrew にも感謝して、より多くのリソースを案内してくれました。
最初のリンクのソース コードを見ると、メインの JQuery プラグインを使用してスクロール イベントを処理しているように見えます - Parallax です。http://stephband.info/jparallax/ . これにより、開発者は通常のスクロール イベントと比較して、ページのさまざまな部分のスクロール速度を設定できます。次のコードは、最初のリンクからの抜粋であり、何が起こっているかについて何らかのコンテキストを提供する必要があります。
$(document).ready(function(){
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#first').parallax("25%", 0.1);
$('.ft1-small-1-bg').parallax("75%", 0.4);
$('.ft1-small-2-bg').parallax("75%", 0.2);
$('#second').parallax("25%", 0.1);
$('.ft2-small-1-bg').parallax("100%", 0.4);
$('.ft2-small-2-bg').parallax("100%", 0.2);
$('#third').parallax("50%", 0.3);
$('.ft3-small-1-bg').parallax("100%", 0.4);
$('.ft3-small-2-bg').parallax("100%", 0.2);
$('#fourth').parallax("50%", 0.3);
$('.ft4-small-1-bg').parallax("10%", 0.4);
$('.ft4-small-2-bg').parallax("10%", 0.2);
$('.ft4-small-3-bg').parallax("110%", 0.2);
$('.ft4-small-4-bg').parallax("110%", 0.2);
$('.tabs-menu a').fttabs();
var viewportHeight = screen.height;
var headerHeight = $('.fulltoss-header').outerHeight();
var vheight = viewportHeight-headerHeight;
$('#fourth.page').height(vheight);
$('#fourth .story').css('height',vheight);
$('#fourth .story').css('min-height',vheight);
$('#fourth .story').css('overflow','hidden');
$('.ft4-small-1-bg, .ft4-small-2-bg, .ft4-small-3-bg, .ft4-small-4- bg').height(vheight);
});
ソース - http://www.espncricinfo.com/navigation/zones/fulltoss/main.js?10