CSS & JS Effect – Statistics Counter

2022/6/11 23:54:30

编程Tag： js view 号码 Font px Counter center statistics Effect

本文主要是介绍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 所以完全没有效果.

这篇关于CSS & JS Effect – Statistics Counter的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS & JS Effect – Statistics Counter

效果

实现思路

搭环境

HTML

CSS Style

效果

相关编程文章