页面模块向上渐变显示效果实现

有梦想的刺儿

已于 2024-02-06 18:04:34 修改

阅读量278

点赞数 1

文章标签：前端 html javascript

于 2024-02-06 18:03:33 首次发布

本文链接：https://blog.csdn.net/qq_58174484/article/details/136060609

版权

ps: 先祝各位朋友新春快乐 ^o^/

想要首页不那么枯燥无味吗？还在未首页过于单调而苦恼吧，来试试这个吧（大佬请忽略上述语句·o·）

今天要实现一个页面线上渐变显示的效果，用来丰富首页等页面：

这里先随机建立几个模块：

<div id="app" style="height: 80vh;">
  <div class="outter" >
    <div v-for="item, index in partList" class="partDiv" :style="'background-color: rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+');'">
      {{ index }}
    </div>
  </div>
</div>

当前效果：

接着为每个色块区域添加默认样式：

opacity: 0;    // 默认透明
top: 50px;    // 顶部距离

之后添加条件，当改色块触发到可视区域时展示：

mounted() {
  this.scrollFun();
  // 监听滚动
  window.addEventListener('scroll', this.scrollFun, true);
},
data: function () {
  return {
    partList: [{},{},{},{},{},{},{},{},{},{}],
  }
},
methods: {
  scrollFun() {
    let outter = document.querySelector('.outter')
    let partDivList = document.querySelectorAll('.partDiv');
    for(let i of partDivList) {
      // 判断是否处于可视区域并更改样式
      if(outter.scrollTop>=i.offsetTop-i.clientHeight ) {
        i.style.opacity = 1;
        i.style.top = 0;
      };
    }
  }
}

最后添加动画即可：

transition: all 1s linear;

参考代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style scoped>
  .partDiv {
    width: 100%;
    height: 500px;
    position: relative;
    opacity: 0;
    top: 50px;
    transition: all 1s linear;
  }
  .outter {
    position: relative;
    overflow-y: scroll;
    height: 100%;
  }

</style>

<div id="app" style="height: 80vh;">
  <div class="outter" >
    <div v-for="item, index in partList" class="partDiv" :style="'background-color: rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+');'">
      {{ index }}
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    mounted() {
      this.scrollFun();
      window.addEventListener('scroll', this.scrollFun, true);
    },
    data: function () {
      return {
        partList: [{},{},{},{},{},{},{},{},{},{}],
      }
    },
    methods: {
      scrollFun() {
        let outter = document.querySelector('.outter')
        let partDivList = document.querySelectorAll('.partDiv');
        for(let i of partDivList) {
          if(outter.scrollTop>=i.offsetTop-i.clientHeight ) {
            i.style.opacity = 1;
            i.style.top = 0;
          };
        }
      }
    }
  })
</script>

</html>

希望本文会对您有所帮助~ ^_^