Question

我很着迷于每个浮动元素似乎以不同的速度滚动。当用户向下或向上滚动页面时，背景看起来如何分层并像窗帘一样上升，隐藏以前可见的元素，并显示新的元素。

我只是无法理解编写CSS / jquery来实现这种效果。任何帮助，或一个小小的工作示例都会有所帮助！

编辑：
感谢Andrew和sevenseacat指出我的“视差”效应。我现在知道several websites use it，包括this insane one that loops around scrolling和this Range Rover site that doesn't even have a scrollbar！

我已经接受了斯科特的回答，因为它直接回答了我的问题，但也感谢安德鲁为我提供更多资源。

Answer 1

查看第一个链接的源代码，它似乎使用一个主要的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

Answer 2

以下是一些可以使用的体面视差库：

如果您对Google有一个很好的了解，您会发现一系列不同的。

如何在网页上获得非均匀滚动元素和分层“幕布”背景？

2 个答案: