先看一下实现的效果:
以上通过滚动,图片随之滚动
看起来蜜汁酷炫
实现原理就是:
滚动视差,是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。
使用技术很简单,只需要css属性: background-attachment: fixed; 无需任何js复杂代码
代码如下:
<template>
<div class="rollingParallax_container">
<div class="gImg gImg1" :style="{‘height‘:currentHeight + ‘px‘}"></div>
<div class="gImg gImg2" :style="{‘height‘:currentHeight + ‘px‘}"></div>
<div class="gImg gImg3" :style="{‘height‘:currentHeight + ‘px‘}"></div>
</div>
</template>
<script>
export default {
name: "rollingParallax",
data() {
return {
currentHeight: 0
};
},
mounted() {
this.currentHeight = document.body.clientHeight
console.log(this.currentHeight);
},
methods: {}
};
</script>
<style lang="less" scoped>
@white: #f4f4f4;
.rollingParallax_container {
width: 100%;
height: 100%;
.gImg {
background-attachment: fixed;
background-size: cover;
background-position: center center;
width: 100%;
}
.gImg1 {
background-image: url(‘./img/img1.png‘);
}
.gImg2 {
background-image: url(‘./img/img2.png‘);
}
.gImg3 {
background-image: url(‘./img/img3.png‘);
}
}
</style>
原文：https://www.cnblogs.com/huangaiya/p/12976043.html