数字滚动模糊动画

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

const number = document.getElementById("number");
const left = document.getElementById("left");
const rights = document.getElementById("right");
const slider = document.getElementById("slider");
let target = 20000;
let current = 0;
const step = 42;

const start = () => {
  right.classList.add("animate");
  update();
};

slider.addEventListener("input", (event) => {
  target = +event.target.value;
  start();
});

const updateValues = () => {
  const [first, ...rest] = current.toLocaleString("en-US").split(",").reverse();
  thousends = rest.reverse();
  
  const thousendsString = thousends.join("");
  if (+left.innerText != thousendsString) {
    left.classList.add("animate");
  } else {
    left.classList.remove("animate");
  }
  left.innerText = thousendsString;
  right.innerText = first;
};

const update = () => {
  if (target - current > 0) {
    current += step;
  } else {
    current -= step;
  }
  if (current >= 1000) {
    separator.classList.add("show");
  } else {
    separator.classList.remove("show");
  }
  updateValues();
  if (Math.abs(target - current) > step) {
    requestAnimationFrame(update);
  } else {
    requestAnimationFrame(() => {
      current = target;
      updateValues();
      left.classList.remove("animate");
      right.classList.remove("animate");
    });
  }
};

requestAnimationFrame(start);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>数字滚动模糊动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号