vue 实现钉钉官网的轮播图下面功能滚动排版CSS效果

这篇具有很好参考价值的文章主要介绍了vue 实现钉钉官网的轮播图下面功能滚动排版CSS效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

  • 最近在写PC端的业主端时候,发现传统的菜单栏比较丑,也不符合实际应用(功能页面并不多-展示为主)

  • 偶然发现钉钉官网的效果挺有意思的,想着把这个效果复原过来,然后夸夸搜索了一番。

  • 经过一顿的cv打法,加上修修补补把大概的效果整了出来,时间关系最基础的,剩下的可以自己补充

地址演示:演示效果地址

视频效果

官网效果

细节

1.代码中第二屏是300vh是3倍,试过很多遍,3倍滚动时效果最好不建议改,建议不显示滚动条(src/styles/index.scss)效果最好

::-webkit-scrollbar {
  // 隐藏滚动条
  display: none; /* Chrome Safari */
}

2.代码中第二屏的3个class类名最好不要改,因为是根据这几个类名在获取DOM操作

3.代码中第二屏中 list-itme中的data-order="0"等于几(从0开始)控制动画盒子顺序,可以自己调试看效果

完整代码-可复制

<template>
  <div class="conter">
    <!-- 第一屏 -->
    <div class="flatly-itemone">
    </div>
    <!-- 第二屏 -->
    <div class="playground">
      <div class="animation-container">
        <div class="titlemanifesto" v-if="titlemanifesto">
          生活意义-坦然面对生活并且接受她的事与愿违
        </div>
        <!-- data-order="0" 数字是控制每一项动画顺序 -->
        <div class="list">
          <div data-order="0" class="list-item"></div>
          <div data-order="1" class="list-item"></div>
          <div data-order="2" class="list-item"></div>
          <div data-order="2" class="list-item"></div>
          <div data-order="1" class="list-item"></div>
          <div data-order="0" class="list-item"></div>
          <div data-order="0" class="list-item"></div>
          <div data-order="1" class="list-item"></div>
          <div data-order="2" class="list-item"></div>
          <div data-order="2" class="list-item"></div>
          <div data-order="1" class="list-item"></div>
          <div data-order="0" class="list-item"></div>
        </div>
      </div>
    </div>
  </div>
</template>
​
<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      animataionMap: new Map(),
      // 文字显示
      titlemanifesto: false
    }
  },
  created() {},
  mounted() {
    this.updateMap(),
      this.updateStyle(),
      window.addEventListener('scroll', this.updateStyle)
  },
  methods: {
    // 得出动画节点数值
    createAnimation(scrollStart, scrollEnd, valueStart, valueEnd) {
      return (scroll) => {
        if (scroll <= scrollStart) {
          return valueStart
        }
​
        if (scroll >= scrollEnd) {
          return valueEnd
        }
​
        return (
          valueStart +
          ((valueEnd - valueStart) * (scroll - scrollStart)) /
            (scrollEnd - scrollStart)
        )
      }
    },
​
    getDomAnimation(scrollStart, scrollEnd, dom) {
      const list = document.querySelector('.list')
      scrollStart = scrollStart + dom.dataset.order * 300
      const opacityAnimation = this.createAnimation(
        scrollStart,
        scrollEnd,
        0,
        1
      )
      // 基于当前滚动计算得出的透明度
      const opacity = function (scroll) {
        return opacityAnimation(scroll)
      }
​
      const scaleAnimation = this.createAnimation(
        scrollStart,
        scrollEnd,
        0.3,
        1
      )
​
      const xAnimation = this.createAnimation(
        scrollStart,
        scrollEnd,
        list.clientWidth / 2 - dom.offsetLeft - dom.clientWidth / 2,
        0
      )
      const yAnimation = this.createAnimation(
        scrollStart,
        scrollEnd,
        list.clientHeight / 2 - dom.offsetTop - dom.clientHeight / 2,
        0
      )
​
      const transform = function (scroll) {
        return `translate(${xAnimation(scroll)}px,${yAnimation(
          scroll
        )}px)  scale(${scaleAnimation(scroll)})`
      }
​
      return {
        opacity,
        transform
      }
    },
​
    updateMap() {
      const items = document.querySelectorAll('.list-item')
      const playGround = document.querySelector('.playground')
      this.animataionMap.clear()
      const playGroundRect = playGround.getBoundingClientRect()
      // 开始动画的距离
      const scrollStart = playGroundRect.top + window.scrollY
      // 结束动画的距离  相当于playground的高度
      const scrollEnd =
        playGroundRect.bottom + window.scrollY - window.innerHeight
      for (const item of items) {
        this.animataionMap.set(
          item,
          this.getDomAnimation(scrollStart, scrollEnd, item)
        )
      }
      // 打开遮罩层
      // this.listmsk = true
    },
​
    updateStyle() {
      const scroll = window.scrollY
      // 获取元素-改变背景颜色
      const list = document.querySelector('.list')
      if (scroll > 2200 && scroll < 2862) {
        console.log('打开遮罩层')
        list.style.backgroundColor = 'rgba(23, 26, 29, 0.9)'
        // 显示文字
        this.titlemanifesto = true;
      } else {
        console.log('关闭遮罩层')
        list.style.backgroundColor = '#063868'
        // 隐藏文字
        this.titlemanifesto = false
      }
      console.log('scroll', scroll)
      for (let [dom, value] of this.animataionMap) {
        for (const cssProp in value) {
          dom.style[cssProp] = value[cssProp](scroll)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.conter {
  .flatly-itemone {
    height: 90vh;
    background-color: #fff;
  }
  .playground {
    height: 310vh;
    background-color: #063868;
    position: relative;
    .animation-container {
      display: flex;
      position: sticky;
      top: 0;
      height: 100vh;
      text {
        z-index: 999;
        color: red;
      }
      // 标题
      .titlemanifesto {
        height: 50px;
        width: 1000px;
        position: absolute;
        left: 50%;
        top: 23%;
        transform: translate(-50%);
        // background-color: skyblue;
        text-align: center;
        color: #fff;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 30px;
        line-height: 50px;
      }
      .list {
        height: 550px;
        width: 1000px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -28%);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-radius: 10px;
        padding: 15px 20px;
        opacity: 0.8;
        .list-item {
          width: 100px;
          height: 155px;
          border-radius: 10px;
          background-color: #fff;
          margin: 50px 30px;
          &:nth-child(2n - 1) {
            background-color: skyblue;
          }
          &:nth-child(2n) {
            background-color: rgb(111, 245, 111);
          }
          &:nth-child(3n) {
            background-color: orange;
          }
        }
      }
    }
  }
}
</style>

总结:

经过这一趟流程下来相信你也对 vue 实现钉钉官网的轮播图下面功能滚动排版CSS效果 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕文章来源地址https://www.toymoban.com/news/detail-508087.html

到了这里,关于vue 实现钉钉官网的轮播图下面功能滚动排版CSS效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue自定义简单实用轮播图封装组件 快速实现轮播图

    前端Vue自定义简单实用轮播图封装组件 快速实现轮播图, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码实现部分

    2024年02月10日
    浏览(86)
  • Vue 实现轮播图功能

    Vue 是一款流行的前端框架,它提供了一系列的工具和组件,使得开发者可以更加便捷地创建交互式的 Web 应用程序。轮播图是 Web 应用程序中常见的一种交互式组件,可以用来展示图片、新闻、广告等内容。在 Vue 中,我们可以使用第三方组件库或自己编写代码来实现轮播图功

    2024年02月05日
    浏览(39)
  • vue实现轮播图效果

    1,实现轮左右按键轮播效果,采用数组下标指定轮播图片,定义一个dindex与index下标相比较。 2,创建轮播的图片的数组 3,实现下方圆点点击轮播图片,采用动态绑定和数组的动态样式实现未点击的白色和点击的黑色 dindex与index相比较两值相不一致就是白色反之为黑色 4,实现

    2024年02月11日
    浏览(43)
  • Vue2+swiper基础实现轮播图

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 swiper的基础使用 提示:以下是本篇文章正文内容,下面案例可供参考 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发         注意:我们用的是vue2所以推荐大家下载swiper5版本 示例: 查看安装是否完成

    2024年01月16日
    浏览(77)
  • 记录--用 Vue 实现原神官网的角色切换效果

    为了更好的了解原神角色,我模仿官网做了一个角色切换效果,在做的过程当中也总结了一些技术点。 为了让大家更好的体验,我兼容了 PC 端和移动端,建议在 PC 端查看效果更佳。接下来就为大家简单的分享一下! 话不多说,原神启动!! 先看一下官网的效果: ys.mihoyo

    2024年02月09日
    浏览(39)
  • vue3 实现门户网站页面鼠标滚轮控制页面上下滚动---类似轮播图

    案例参考:首页_CNESA 储能研究平台 //监听鼠标滚动事件  window.addEventListener(\\\'mousewheel\\\', debounce(methodB,300), true)||window.addEventListener(\\\"DOMMouseScroll\\\",debounce(methodB,300),false) const debounce = (func, wait) ={         let timeout;         return  function() {             let context = this;            

    2024年02月12日
    浏览(73)
  • vue卡片轮播图

    我的项目是vue3的,用的swiper8

    2024年02月14日
    浏览(33)
  • vue中swiper轮播图的使用

    说明:导入相应js引css import \\\"Swiper\\\" from \\\"swiper\\\" import \\\"swiper/css/swiper.css\\\"; import \\\"swiper/js/swiper\\\"; 说明:必要的结构使用;直接封装成一个组件  说明:(页面当中务必要有结构);注释已经写入代码。 第一:可以解决获取数据在Swiper实例之前;第二:可以解决v-for遍历完后在Swiper之

    2024年02月14日
    浏览(45)
  • 前端Vue自定义轮播图视频播放组件 仿京东商品详情轮播图视频Video播放效果 可图片预览

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月15日
    浏览(52)
  • vue项目中使用vant轮播图组件(桌面端)

    vue使用vant轮播图组件(桌面端) 2.1 Visual Studio Code 1.75.0 2.2 chrome浏览器 2.3 node v18.14.0 3.1 安装环境 3.2 添加代码 3.3 结果展示 4.1 安装环境 先安装包 然后桌面端适配 4.2 添加代码 注册组件 相比于官方给的代码,有两个方面需要注意,一个是适配桌面端,还有一个就是我以为vant组

    2024年02月04日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包