DingDing-Dashboard

发表于 | 分类于

钉钉首页滚动动画

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DingDing</title>
  <link href="./index.css" rel="stylesheet">
</head>

<body>
  <div class="playground">
    <div class="content-container"></div>
    <div class="animation-container">
      <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="3" class="list-item"></div>
        <div data-order="3" 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="3" class="list-item"></div>
        <div data-order="3" 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>
  <script src="./index.js"></script>
</body>

</html>

index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
* {
  padding: 0;
  margin: 0;
}

.playground {
  width: 100%;
  height: 6000px;
  background-color: #000;
}

.content-container {
  width: 100%;
  height: 1400px;
  background-color: green;
}

.animation-container {
  position: relative;
  width: 100%;
  height: 2000px;
  background-color: orange;
}

.list {
  width: 1200px;
  height: 560px;
  padding: 0 70px;  
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: rgba(23, 26, 29, .9);
  position: sticky;
  margin: 0 auto;
  top: 20%;
  box-sizing: border-box;
}

.list-item{
  width: 80px;
  height: 80px;
  margin-left: 40px;
  border-radius: 15px;
}

.list-item:nth-child(odd) {
  background-color: pink;
}

.list-item:nth-child(even) {
  background-color: red;
}

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
const list = document.getElementsByClassName('list')[0]
const items = document.getElementsByClassName('list-item')
const playGround = document.getElementsByClassName('playground')
const contentContainer = document.getElementsByClassName('content-container')[0]
const animationContainer = document.getElementsByClassName('animation-container')[0]


function createAnimation(scrollStart, scrollEnd, valueStart, valueEnd) {
  return function (scroll) {
    if (scroll <= scrollStart) return valueStart
    if (scroll >= scrollEnd) return valueEnd
    return (valueStart + ((valueEnd - valueStart) * (scroll - scrollStart)) / (scrollEnd - scrollStart))
  }
}

const animationMap = new Map()

function getDomAnimation(scrollStart, scrollEnd, dom) {
  scrollStart = scrollStart + dom.dataset.order * 200
  const opacityAnimation = createAnimation(scrollStart, scrollEnd, 0, 1)
  const opacity = function (scroll) {
    return opacityAnimation(scroll)
  }

  const scaleAnimation = createAnimation(scrollStart, scrollEnd, 0.5, 1)
  const xAnimation = createAnimation(scrollStart, scrollEnd, list.clientWidth / 2 - dom.offsetLeft - dom.clientWidth / 2, 0)
  const yAnimation = 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
  }
}

function updateMap() {
  // 浏览器比例缩放等重置
  animationMap.clear()
  console.log('contentContainer: ', getStyles(contentContainer, 'height'), window.scrollY);
  const scrollStart = getStyles(contentContainer, 'height') - 630
  const scrollEnd = getStyles(contentContainer, 'height') + getStyles(animationContainer, 'height')
  for (const item of items) {
    animationMap.set(item, getDomAnimation(scrollStart, scrollEnd, item))
  }
}

function updateStyles() {
  const scroll = window.scrollY
  for (let [dom, value] of animationMap) {
    // console.log(value.transform(scroll), '333')
    for (const cssProps in value) {
      dom.style[cssProps] = value[cssProps](scroll)
    }

  }
}

updateMap()
updateStyles()

window.addEventListener('scroll', updateStyles)

function getScrollOffset() {
  if (window.pageXOffset) {
    return {
      left: window.pageXOffset, // scrollX
      top: window.pageYOffset   // scrollY
    }
  } else {
    return {
      left: document.body.scrollLeft + document.documentElement.scrollLeft,
      top: document.body.scrollTop + document.documentElement.scrollTop
    }
  }
}

// 元素内容尺寸
function getStyles(ele, props) {
  if (window.getComputedStyle) {
    if (props) {
      return parseInt(window.getComputedStyle(ele, null)[props])
    } else {
      return window.getComputedStyle(ele, null)
    }
  } else {
    if (props) {
      return parseInt(ele.currentStyle[props])
    } else {
      return ele.currentStyle
    }
  }
}