简单实现视差滚动

视差滚动是一个有趣的技术,当你滚动页面时背景移动的速度慢于内容(前景内容),造成一种3D效果。

接下来我将使用最简单的代码实现视差效果。

页面结构

这个技术的要点在于控制背景的移动速度,所以开始我们先创建HTML结构:

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

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

我们使用 data-type=”background” 和 data-speed=”10”作为关键值来实现效果。

继续阅读全文 »