ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS & JS Effect – Statistics Counter

2022-06-11 18:03:08  阅读:59  来源: 互联网

标签:Statistics center 号码 px Counter Effect JS font View


效果

当 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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有