前段时间公司领导安排我把公司的官网重做一下(至于为什么重做我这里就不细说了),但咱也没写过网页的项目呀!不过呢咱还是有点微信小程序和基本的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

Logo

前往低代码交流专区

更多推荐