视差滚动教程、实现方法、源代码
最近很流行“视差滚动”效果，抛开设计不说，前端上的实现方法很有意思，国内详细的教程不多，所以自己研究别人网站，实践总结。
一、例子
SmaShing
Spark
QQ浏览器
二、原理
传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，偶尔有一些背景固定的网页。
顾名思义“视差滚动”就是通过滚动这个行为实现视觉上的层次错落的错觉，从而形成立体的运动效果。
其实分析各个优秀的例子网站，不难发现其实原理一样的，手法上也大同小异，都是通过控制多层的透明背景，在滚动的时候不再是只向上运动，而是以不同的速度、不同的方向去运动，再结合现实世界的运动规律，从而达到很棒的视觉冲击和交互
三、讲解
先分析下SmaShing 这个相对简单的例子。
观察此例子不难发现实现方法：最上层的页面元素（文字、图片）按照正常的方式滚动，背景通过JS往下方运动，从而实现了视差滚动
可以发现主体是由4个section标签组成的：
注意看属性：
data-type 类型，JS用来按类型选取元素
data-speed 速度，用于储存移动速度，供JS调用
style="background-position: 50% 0px;"
注意看这个行内属性 background-position 用来控制背景的位置，这个就是本例子的关键所在
我们滚动一段，通过firebug可以检测到此属性的变化
往下滚动的时候，此属性的值越来越小，我们都知道第二个参数代表Y轴方向，越小往下方偏移越多，从而看起来背景是往下方运动
下面我们看下作者是怎么通过JS控制的，附上源码：
$(document).ready(function () {
// 读取window
$window = $(window);
// 遍历包含“data-type”的元素，读取并设置Y偏移量、X位置、滚动速度等参数
$('[data-type]').each(function () {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// 遍历符合 section[data-type="background"] 选择器的元素
$('section[data-type="background"]').each(function () {
// 存储一起基础变量
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
// 当窗口滚动时
$(window).scroll(function () {
// 通过计算滚动条高度和窗口高度判断当前元素是否在视野中
if (($window.scrollTop() + $window.height()) > (topOffset) &&
((topOffset + $self.height()) > $window.scrollTop())) {
// 以设定的速度滚动背景
// 因为我们是向上滚动，所以背景的yPos是负值
var yPos = -($window.scrollTop() / $self.data('speed'));
// 如果此元素有一个Y偏移，将其添加上
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
// 最终的背景位置
var coords = '50% ' + yPos + 'px';
// 滚动背景
$self.css({ backgroundPosition: coords });
// 遍历本节点中的其他元素
$('[data-type="sprite"]', $self).each(function () {
// 读取data-type="sprite"规则的元素
var $sprite = $(this);
// 使用同样的方法进行滚动
var yPos = -($window.scrollTop() / $sprite.data('speed'));
var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
$sprite.css({ backgroundPosition: coords });
});
// 遍历需要滚动的视频
$('[data-type="video"]', $self).each(function () {
// 读取data-type="video"规则的元素
var $video = $(this);
var yPos = -($window.scrollTop() / $video.data('speed'));
var coords = (yPos + $video.data('offsetY')) + 'px';
$video.css({ top: coords });
});
}; // in view
}); // window scroll
}); // each data-type
}); // document ready
四、总结和发散
通过分析上面的例子我们发现，其实就是通过JS去移动背景，此例子只是反向滚动了背景，已经达到了不错的效果。
我们可以向多个方向去扩展和发散：1.多层背景已不同的速度、不同的方向、不同的效果去滚动 2.页面上的元素可以用JS或jQuery去实现不同的效果，配合背景能达到很好的效果
转载请注明出处，谢谢！更多文章