其他分享
首页 > 其他分享> > CSS & JS Effect – Statistics Counter

CSS & JS Effect – Statistics Counter

作者：互联网

效果

当 scroll 到那些号码的时候, 号码从 0 开始跳动, 一直到最终的值.

 

实现思路

1. 一开始把号码 set to 0

2. 使用 IntersectionObserver 监听号码出现

3. 出现后开始累加, 一直到最终的 value. (注意, 虽然每个号码是不同的, 但是会在同一秒低到终点. 所以每个号码的累加速度是不一样的, 号码越大跑的就越快)

 

搭环境

HTML

<body>
  <header>Lorem ipsum dolor sit.</header>
  <main>
    <p>
      <span class="number">1280</span>
      <span>px</span>
    </p>
    <p>
      <span class="number">1366</span>
      <span>px</span>
    </p>
    <p>
      <span class="number">1560</span>
      <span>px</span>
    </p>
    <p>
      <span class="number">1920</span>
      <span>px</span>
    </p>
  </main>
</body>
View Code

CSS Style

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  height: 80vh;
  width: 100%;
  background-color: pink;
  display: grid;
  place-content: center;
  font-size: 4rem;
  text-align: center;
}

main {
  height: 100vh;
  display: grid;
  place-content: center;

  p {
    font-size: 4rem;
  }
}
View Code

效果

还没有加入 JS 所以完全没有效果.

 

标签：Statistics,center,号码,px,Counter,Effect,JS,font,View
来源： https://www.cnblogs.com/keatkeat/p/16366408.html