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

3756次浏览

视觉差效果描述

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

视觉差效果的原理

视觉差效果的制作,我们主要要了解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。来实现视觉差效果!

综合案例下载

对于视觉差效果,我在前端资源库里面列举了3个案例可以供大家下载!

1、css制作固定背景,全屏滑动固定背景

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

3、这个是综合案例,parallax-slider流行的视觉差图片滑动效果

感兴趣的可以去下载一下,研究一下他们的源码!关于视觉差就说到这里,感谢大家!

Tags: css滚动

相关文章: