视觉差效果制作总结和案例下载

2016年7月27日 16698次浏览

视觉差效果描述

所谓视觉差效果，就是我们所看到的那种背景固定的滚动的效果，你可以预览查看。我前面加链接的这两个，都是我们所常说的视觉差效果。其实视觉差效果流行蛮久了！那今天，我和大家简单介绍一下这个视觉差效果！

视觉差效果的原理

视觉差效果的制作，我们主要要了解css背景background-attachment: fixed;这个属性，我之前有介绍过background-image，制作多个背景这个属性，但是没有介绍个background-attachment，background-attachment有三个值，scroll,fixed，和inherit,默认是scroll,背景随着滚动而滚动，那fixed呢，表示“当页面的其余部分滚动时，背景图像不会移动”。

一种方式，我们可以通过css3属性translate变换来实现。例如我们下面这个插件

css制作固定背景，全屏滑动固定背景，代码我已经在插件介绍中贴出来了。欢迎出查看！

另外一种方式，我们可以通过background-position,y轴的不断变化，来实现，例如这个案例：

固定背景的视觉差滚动效果之jquery-parallax

通过下面这段js代码

function update(){
            var pos = $window.scrollTop();                

            $this.each(function(){
                var $element = $(this);
                var top = $element.offset().top;
                var height = getHeight($element);

                // Check if totally above or totally below viewport
                if (top + height < pos || top > pos + windowHeight) {
                    return;
                }

                $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
            });
        }

在页面滚动的时候，不断变化backgroundPosition。来实现视觉差效果！