VUE实现背景视差滚动效果

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

 

1.视差滚动

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

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

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

2.实现

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

 

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

<template>
  <div class="home">
    <p v-for="item in 20" :key="item">aaaaaaaaaaaaaaaaaaaa</p>
	<div class="bgTest">
     <p v-for="item in 10" :key="item + 40">bbbbbbbbbbbbbb</p>
</div>
	<p v-for="item in 20" :key="item">aaaaaaaaaaaaaaaaaaaa</p>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {
  }
};
</script>
<style>

	.bgTest{
		height: 500px;
		background: url(../assets/bg.jpg) no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
		font-size: 20px;
		
	}
</style>

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

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

background-attachment: fixed;

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

 

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

background-position

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

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

<template>
	<div class="home">
		<p v-for="item in 20" :key="item">aaaaaaaaaaaaaaaaaaaa</p>
		<div class="bgTest" id="bgTest" :style="{'background-position-y':positionY1+'px'}">

         <p v-for="item in 10" :key="item + 40">bbbbbbbbbbbbbb</p>
       </div>
		<p v-for="item in 20" :key="item+20">aaaaaaaaaaaaaaaaaaaa</p>
	</div>
</template>

<script>
	export default {
		name: "Home",
		data() {
			return {
				positionY1: 0, //背景Y轴偏移量
				Y1: 0,
				ratio: 0.5 //视差偏移率
			}
		},
		/**
		 * 
		 * */
		mounted() {
			window.addEventListener("scroll", this.handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
				let bgTest = document.getElementById("bgTest");
				this.Y1 = bgTest.offsetTop * this.ratio

		},
		methods: {
			/**
			 * 背景视差偏移计算
			 * */
			handleScroll: function() {
				let scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop;
				this.positionY1 = this.Y1 - scrollTop * this.ratio; //原始高度-滚动距离*视差系数
				
			}
		},
		components: {}
	};
</script>
<style>
	.bgTest {
		height: 500px;
		background: url(../assets/bg.jpg) no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
		font-size: 20px;

	}
</style>

     

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

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

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

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