前言

• 最近在寫PC端的業(yè)主端時候，發(fā)現(xiàn)傳統(tǒng)的菜單欄比較丑，也不符合實際應(yīng)用（功能頁面并不多-展示為主）

• 偶然發(fā)現(xiàn)釘釘官網(wǎng)的效果挺有意思的，想著把這個效果復(fù)原過來，然后夸夸搜索了一番。

• 經(jīng)過一頓的cv打法，加上修修補(bǔ)補(bǔ)把大概的效果整了出來，時間關(guān)系最基礎(chǔ)的，剩下的可以自己補(bǔ)充

地址演示：演示效果地址

視頻效果

細(xì)節(jié)

1.代碼中第二屏是300vh是3倍，試過很多遍，3倍滾動時效果最好不建議改，建議不顯示滾動條（src/styles/index.scss）效果最好

::-webkit-scrollbar {
? // 隱藏滾動條
? display: none; /* Chrome Safari */
}

2.代碼中第二屏的3個class類名最好不要改，因為是根據(jù)這幾個類名在獲取DOM操作

3.代碼中第二屏中 list-itme中的data-order="0"等于幾（從0開始）控制動畫盒子順序，可以自己調(diào)試看效果

完整代碼-可復(fù)制

<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" 數(shù)字是控制每一項動畫順序 -->
 ? ? ?  <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: {
 ?  // 得出動畫節(jié)點數(shù)值
 ?  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
 ? ?  )
 ? ?  // 基于當(dāng)前滾動計算得出的透明度
 ? ?  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
 ? ?  // 結(jié)束動畫的距離  相當(dāng)于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('關(guān)閉遮罩層')
 ? ? ?  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;
 ? ?  }
 ? ?  // 標(biāo)題
 ? ?  .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>

總結(jié)：

經(jīng)過這一趟流程下來相信你也對 vue 實現(xiàn)釘釘官網(wǎng)的輪播圖下面功能滾動排版CSS效果 有了初步的深刻印象，但在實際開發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！

什么不足的地方請大家指出謝謝 -- 風(fēng)過無痕文章來源地址http://www.zghlxwxcb.cn/news/detail-508087.html

到了這里，關(guān)于vue 實現(xiàn)釘釘官網(wǎng)的輪播圖下面功能滾動排版CSS效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！