这是一款简单的jQuery视觉差滚动效果。视觉差技术是一项非常有意思的技术。在这个demo中,当你用鼠标向下滚动页面的时候,背景图片的滚动速度比页面的内容的滚动速度要慢,形成了一种强烈的3d视觉差效果。
HTML
这个效果的重点是背景图片的滚动速度。所以html结果应该如下,创建两个section,并给他们两个属性:data-type
和data-speed
。
<section id="home" data-type="background" data-speed="10"> </section> <section id="about" data-type="background" data-speed="10"> </section>
这里使用的section标签和data-type
、data-speed
是html5引进的技术。这样书写使页面更加整洁和易读。
根据自定义的数据属性的规范,任何属性值开始将被视为私人数据的存储区。此外,这不会影响布局或表现。
由于我们需要控制背景图片的滚动速度,我们使用data-type="background"和data-speed="10"来指定它们的关键参数。
更多详细信息请参看:http://code.tutsplus.com/tutorials/simple-parallax-scrolling-technique--net-27641
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!