最近很流行“视差滚动”效果,抛开设计不说,前端上的实现方法很有意思,国内详细的教程不多,所以自己研究别人网站,实践总结。
一、例子
二、原理
传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的,偶尔有一些背景固定的网页。
顾名思义“视差滚动”就是通过滚动这个行为实现视觉上的层次错落的错觉,从而形成立体的运动效果。
其实分析各个优秀的例子网站,不难发现其实原理一样的,手法上也大同小异,都是通过控制多层的透明背景,在滚动的时候不再是只向上运动,而是以不同的速度、不同的方向去运动,再结合现实世界的运动规律,从而达到很棒的视觉冲击和交互
三、讲解
先分析下
观察此例子不难发现实现方法:最上层的页面元素(文字、图片)按照正常的方式滚动,背景通过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去实现不同的效果,配合背景能达到很好的效果
转载请注明出处,谢谢!更多文章