滚动视差

Posted 2020-12-06 huangaiya

先看一下实现的效果:

 

以上通过滚动,图片随之滚动

看起来蜜汁酷炫

实现原理就是:

　　滚动视差,是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

 

使用技术很简单,只需要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>