视差滚动教程、实现方法、源代码

最近很流行“视差滚动”效果，抛开设计不说，前端上的实现方法很有意思，国内详细的教程不多，所以自己研究别人网站，实践总结。

 

一、例子

 

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去实现不同的效果，配合背景能达到很好的效果

转载请注明出处，谢谢！

 

来源：http://blog.csdn.net/huileiforever/article/details/9183011