• 欢迎光临~

CSS & JS Effect – Statistics Counter

开发技术 开发技术 2022-06-11 次浏览

效果

CSS & JS Effect – Statistics Counter

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

 

实现思路

1. 一开始把号码 set to 0

2. 使用 IntersectionObserver 监听号码出现

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

 

搭环境

HTML

CSS & JS Effect – Statistics CounterCSS & JS Effect – Statistics Counter
<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

CSS &amp; JS Effect – Statistics CounterCSS &amp; JS Effect – Statistics Counter
* {
  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

效果

CSS &amp; JS Effect – Statistics Counter

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

 

程序员灯塔
转载请注明原文链接:CSS & JS Effect – Statistics Counter
喜欢 (0)