gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 18:46:39 26 4
gpt4 key购买 nike

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

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

看看

ScrollCounter

以及混淆的 CSS 和 HTML...

Animation

更新1

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

尽管...在现实生活中,我会通过 WebSocket 更新此值。

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>

最佳答案

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

(() => {
// 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;
}

关于html - 价格行为的滚动过渡动画。如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67352217/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com