VUE实现背景视差滚动效果

    前段时间公司领导安排我把公司的官网重做一下（至于为什么重做我这里就不细说了），但咱也没写过网页的项目呀！不过呢咱还是有点微信小程序和基本的html基础的，也就接下了这个任务。想想最近VUE貌似挺火的，也就顺便学习一下。那接下来要说的内容就是基于VUE编写的了。好，废话说完了，开始~

 

1.视差滚动

      视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。

     先看我写的一个简单效果：

      这是一个很简单的示例，相信大家在很多网站应该都见过这种效果。主内容和背景图的滚动速率不一样就实现了这种视差效果。现在来说说怎么是实现的吧！

2.实现

    咱先创建一个vue项目，写一个简单页面，目录结构如下：

 

      我们先删除Home.vue中的布局代码，重新写一个简单界面：

  代码很简单，一个div里面设置了一个长背景图，上下加上p标签用来撑高页面使页面可以滚动。先看一下效果图：

 

可以看到随着内容的滚动，但是背景图片却没有跟着滚动，而是展示出背景图不同的部位。这个效果也有一些网站会用到，这个实现比较简单，值得说一下的就是css的这个属性：

background-attachment: fixed;

这个属性是干嘛的呢？看介绍

 

因为我的div设置了background-attachment: fixed;属性，所以div的背景图片是固定的。但有的同学就说，这不是我要的效果呀，我要的效果是，随着内容的滚动，背景图片会跟着有小幅的滚动。别急，接下来再看一个css的属性：

background-position

那这个background-position有什么作用呢？看介绍：

      设置背景图片的起始位置能干嘛？大家想一下现在我们的图片是固定的，没有滚动，但是如果我么设置了背景y轴或者x轴的起始位置随着鼠标滚动而产生的不同的偏差，是不是也和背景滚动有一样的效果了，只要我们把背景滚动的速率控制的慢一点，就能实现文章开头的效果。好，有了思路，开始写代码，更改Home.vue中的代码，添加随着鼠标滚动改变背景位置的逻辑：

     

     根据“bgTest”距离顶部的距离动态的计算了背景Y轴的偏移量，看看效果：

    这下背景随着鼠标滚动就会有小幅度滚动了。至于细节方面可以调整ratio的值和Y1的计算方式来优化细节。ratio的值控制背景滚动速率，Y1值控制背景起始位置。

    好了大功告成。附上源码地址：

https://github.com/954469291/background_parallax.git