我说的是像 this FullToss one 这样的网站和 this ASUS one .
我对每个 float 元素似乎以不同速度滚动的方式着迷。以及当用户向下或向上滚动页面时,背景是如何分层和像窗帘一样升起的,隐藏以前可见的元素,并显示新的元素。
我只是无法集中精力编写 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 !
我接受了 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
关于jquery - 如何获取网页上非均匀滚动的元素和分层的 "curtain-like"背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16083329/