CSS & JS Effect – Statistics Counter
2022/6/11 23:54:30
本文主要是介绍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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南