这是一款简单的jQuery视觉差滚动效果。视觉差技术是一项非常有意思的技术。在这个demo中,当你用鼠标向下滚动页面的时候,背景图片的滚动速度比页面的内容的滚动速度要慢,形成了一种强烈的3d视觉差效果。

HTML

这个效果的重点是背景图片的滚动速度。所以html结果应该如下,创建两个section,并给他们两个属性:data-typedata-speed

<section id="home" data-type="background" data-speed="10">                            
</section>   
     
<section id="about" data-type="background" data-speed="10">
</section>
                

这里使用的section标签和data-typedata-speed是html5引进的技术。这样书写使页面更加整洁和易读。

根据自定义的数据属性的规范,任何属性值开始将被视为私人数据的存储区。此外,这不会影响布局或表现。

由于我们需要控制背景图片的滚动速度,我们使用data-type="background"和data-speed="10"来指定它们的关键参数。

更多详细信息请参看:http://code.tutsplus.com/tutorials/simple-parallax-scrolling-technique--net-27641