JS数字滚动模糊动画效果

带有 CSS / SVG / JS 的数字滚动模糊动画。

JS 数字滚动模糊动画效果

HTML 代码:

<div class="container">
  <input id="slider" class="slider" type="range" min="0" max="20000" step="5000" list="values" value="20000">

  <datalist id="values">
    <option value="0" label="0"></option>
    <option value="5000" label="5000"></option>
    <option value="10000" label="10000"></option>
    <option value="15000" label="15000"></option>
    <option value="20000" label="20000"></option>
  </datalist>

  <div class="number" id="number">
    <div class="left" id="left"></div>
    <div class="separator" id="separator">,</div>
    <div class="right" id="right">0</div>
  </div>
</div>

<svg class="svgFilter" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blurFilter">
      <feGaussianBlur id="blurFilterItem" in="SourceGraphic" stdDeviation="13,0" />
    </filter>
  </defs>
</svg>

CSS 代码:

.number {
  display: flex;
  align-items: center;
  font-size: 6rem;
  justify-content: flex-end;
}
.number .animate {
  filter: url("#blurFilter");
}
.number .left,
.number .right {
  min-width: 11rem;
  text-align: right;
}
.number .right {
  padding-right: 1rem;
}
.number .separator {
  opacity: 0;
  transition: opacity 0.1s ease;
}
.number .separator.show {
  opacity: 1;
}

.svgFilter {
  display: none;
}

.slider {
  accent-color: black;
  background: red;
  min-width: min(20rem, 60vw);
}

.container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100vw;
  background: #ffc107;
  font-style: italic;
  padding: 1;
  font-weight: bold;
}

:root {
  --labs-sys-color-on-background: black;
}

* {
  box-sizing: border-box;
}

JS 代码:

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);

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » JS数字滚动模糊动画效果

发表回复