时间戳

首页 > 解决方案 > 价格行为的滚动过渡动画。如何？

html - 价格行为的滚动过渡动画。如何？

问题描述

我上网查了一下，只找到了一个版本swift。在线，返回搜索结果的唯一关键字是ScrollCounter。这种类型的动画甚至可能CSS HTML吗？

如果有人可以向我指出有效的资源或示例，我将在创建一个有效的示例后发回我的研究。

看一看

滚动计数器

以及混淆的 CSS 和 HTML……

动画片

更新 1

我找到了以下计数器动画，但仍在试图弄清楚如何将其实现为货币计数器，包括大于 999.99 的数字的可选逗号。

虽然......在现实生活中，我会通过 WebSockets 更新这个值。

const genNumber = () => {
  document.querySelector("div").style.setProperty("--percent", Math.random());
};

setInterval(genNumber, 3000);
setTimeout(genNumber);
@property --percent {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
@property --temp {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
@property --v1 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --v2 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

div {
  font: 800 40px monospace;
  padding: 2rem;
  transition: --percent 1s;
  --temp: calc(var(--percent) * 100);
  --v1: max(var(--temp) - 0.5, 0);
  --v2: max((var(--temp) - var(--v1)) * 100 - 0.5, 0);
  counter-reset: v1 var(--v1) v2 var(--v2);
}
div::before {
  content: counter(v1) "." counter(v2, decimal-leading-zero) "%";
}
<div></div>

标签： htmlcsscss-animations

解决方案

这是我设法想出的，希望比您自己的答案更符合您的要求。只需创建所有可能的字符，然后使用 CSS 将正确的字符滚动到视图中。

(() => {
  // BUILD VIEW
  const chars = ["$", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", ','];
  
  const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
    });

  const container = document.createElement("div");
  container.setAttribute("class", "spinner-container");

  const cols = [];
  for (let x = 0; x < 12; x++) {
    cols[x] = document.createElement("div");
    cols[x].setAttribute("class", "spinner-col");

    for (let char of chars) {
      const div = document.createElement("div");
      div.innerText = char;
      div.setAttribute("class", "spinner-char");
      cols[x].append(div);
    }

    container.append(cols[x]);
  }
  document.body.append(container);

  // LOGIC

  const setValue = (value) => {
    for (let x = value.length; x < cols.length; x++) {
        cols[x].style.display = "none";
    }
    
    for (let x = 0; x < value.length; x++) {
      const index = chars.indexOf(value[x]);
      cols[x].style.display = "block";
      cols[x].style.transform = `translate(0, -${index * 75}px)`;
    }
  };

  setInterval(() => {
    const value = Math.random() * (999999 - 100000) + 100000;
    setValue(formatter.format(value / 100));
  }, 2000);
})();
.spinner-container {
  height: 75px;
  display: flex;
  overflow: hidden;
}

.spinner-col {
  box-sizing: border-box;
  transform: translate(0, 0);
  transition: transform 400ms ease-in-out;
}

.spinner-char {
  width: 34px;
  text-align: center;
  font-size: 50px;
  height: 75px;
  line-height: 75px;
}

推荐阅读