html/css/js - 选取框，滚动一个元素然后暂停，然后再次滚动
[英]html/css/js - marquee, scroll one element then pause, then scroll again
问题描述
我正在尝试为我的 twitch 频道创建一个覆盖页面。 我玩 Rocket League，tracker.network 网站提供了显示您排名的叠加层。
基本上我放在一起的是一个带有一堆 iframe 的选取框，用于抓取排名覆盖并滚动它们。 到目前为止效果很好。
我想做的是让它在加载时暂停，慢慢滚动到下一个，然后再次暂停，最后重复。 我在寻找正确的单词组合来在谷歌中搜索这个问题时遇到了一些麻烦，大多数查询我得到的答案与 javascript 的滚动停止有关。
这是当前代码：
<html>
<head>
<style>
iframe {
border: 0px;
margin: 0px;
}
</style>
</head>
<body>
<marquee>
<iframe src="https://tracker.gg/overlays/overlay/347710c7-d003-47ec-8c56-29269060692c"></iframe>
<iframe src="https://tracker.gg/overlays/overlay/687c5759-99f1-4f40-95c3-377cfb1751be"></iframe>
<iframe src="https://tracker.gg/overlays/overlay/b8efb59c-02ae-4edf-9c9d-50a6d1643064"></iframe>
<iframe src="https://tracker.gg/overlays/overlay/80fc2dab-f197-452e-827d-36aafdeca87d"></iframe>
<iframe src="https://tracker.gg/overlays/overlay/76576b68-97aa-42a5-a5e4-45574ab0d3e9"></iframe>
<iframe src="https://tracker.gg/overlays/overlay/fe174a33-4b60-4bcd-aed6-3188dbf1d432"></iframe>
<iframe src="https://tracker.gg/overlays/overlay/7c1a3a59-7540-4c15-a5b4-24d19dbd5880"></iframe>
<iframe src="https://tracker.gg/overlays/overlay/ebc95461-8851-4576-a8bf-0f8aec7c9d46"></iframe>
</marquee>
</body>
</html>
任何提示将不胜感激。 还考虑在将来使其成为没有 iframe 和选取框的纯 css/html。
1 个解决方案
解决方案1
0 2022-02-08 10:02:40
按照我想要的方式运行：) 使用纯 CSS 动画。 必须做一些数学运算才能计算出 animation 的总长度，然后计算出关键帧的百分比。 感谢@The_Paradox 向我指出了一些 JavaScript 方法，这些方法让我陷入了困境，以找到 CSS animation 的东西，（我仍在使用 iframe。但是 tbf 对于这种类型的东西，它不是一个坏方法 go ... )
<html>
<head>
<style>
@keyframes mq1 {
0% { transform:translateX(100%); }
1% { transform:translateX(0); }
9% { transform:translateX(0); }
10% { transform:translateX(-100%); }
100% { transform:translateX(-100%); }
}
@keyframes mq2 {
0% { transform:translateX(100%); }
10% { transform:translateX(100%); }
11% { transform:translateX(0); }
19% { transform:translateX(0); }
20% { transform:translateX(-100%); }
100% { transform:translateX(-100%); }
}
@keyframes mq3 {
0% { transform:translateX(100%); }
20% { transform:translateX(100%); }
21% { transform:translateX(0); }
29% { transform:translateX(0); }
30% { transform:translateX(-100%); }
100% { transform:translateX(-100%); }
}
@keyframes mq4 {
0% { transform:translateX(100%); }
30% { transform:translateX(100%); }
31% { transform:translateX(0); }
39% { transform:translateX(0); }
40% { transform:translateX(-100%); }
100% { transform:translateX(-100%); }
}
@keyframes mq5 {
0% { transform:translateX(100%); }
40% { transform:translateX(100%); }
41% { transform:translateX(0); }
49% { transform:translateX(0); }
50% { transform:translateX(-100%); }
100% { transform:translateX(-100%); }
}
@keyframes mq6 {
0% { transform:translateX(100%); }
50% { transform:translateX(100%); }
51% { transform:translateX(0); }
59% { transform:translateX(0); }
60% { transform:translateX(-100%); }
100% { transform:translateX(-100%); }
}
@keyframes mq7 {
0% { transform:translateX(100%); }
60% { transform:translateX(100%); }
61% { transform:translateX(0); }
69% { transform:translateX(0); }
70% { transform:translateX(-100%); }
100% { transform:translateX(-100%); }
}
@keyframes mq8 {
0% { transform:translateX(100%); }
70% { transform:translateX(100%); }
71% { transform:translateX(0); }
79% { transform:translateX(0); }
80% { transform:translateX(-100%); }
100% { transform:translateX(-100%); }
}
@keyframes mq9 {
0% { transform:translateX(100%); }
80% { transform:translateX(100%); }
81% { transform:translateX(0); }
89% { transform:translateX(0); }
90% { transform:translateX(-100%); }
100% { transform:translateX(-100%); }
}
@keyframes mq10 {
0% { transform:translateX(100%); }
90% { transform:translateX(100%); }
91% { transform:translateX(0); }
99% { transform:translateX(0); }
100% { transform:translateX(-100%); }
}
.marquee {
width: 300px;
height: 150px;
margin: 10px auto;
overflow: hidden;
position: relative;
white-space: nowrap;
vertical-align: text-top;
border: 0px;
}
.marquee iframe {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
transform:translateX(100%);
}
iframe.marquee:nth-child(1) {
animation: mq1 80s ease 5s infinite;
}
iframe.marquee:nth-child(2) {
animation: mq2 80s ease 5s infinite;
}
iframe.marquee:nth-child(3) {
animation: mq3 80s ease 5s infinite;
}
iframe.marquee:nth-child(4) {
animation: mq4 80s ease 5s infinite;
}
iframe.marquee:nth-child(5) {
animation: mq5 80s ease 5s infinite;
}
iframe.marquee:nth-child(6) {
animation: mq6 80s ease 5s infinite;
}
iframe.marquee:nth-child(7) {
animation: mq7 80s ease 5s infinite;
}
iframe.marquee:nth-child(8) {
animation: mq8 80s ease 5s infinite;
}
iframe.marquee:nth-child(9) {
animation: mq9 80s ease 5s infinite;
}
iframe.marquee:nth-child(10) {
animation: mq10 80s ease 5s infinite;
}
/*
.marquee.iframe:nth-child(1) {
animation: left-one 20s ease infinite;
}
.marquee.iframe:nth-child(2) {
animation: left-two 20s ease infinite;
}
*/
</style>
</head>
<body>
<div class="marquee">
<iframe class="marquee" src="https://tracker.gg/overlays/overlay/347710c7-d003-47ec-8c56-29269060692c"></iframe>
<iframe class="marquee" src="https://tracker.gg/overlays/overlay/687c5759-99f1-4f40-95c3-377cfb1751be"></iframe>
<iframe class="marquee" src="https://tracker.gg/overlays/overlay/b8efb59c-02ae-4edf-9c9d-50a6d1643064"></iframe>
<iframe class="marquee" src="https://tracker.gg/overlays/overlay/80fc2dab-f197-452e-827d-36aafdeca87d"></iframe>
<iframe class="marquee" src="https://tracker.gg/overlays/overlay/76576b68-97aa-42a5-a5e4-45574ab0d3e9"></iframe>
<iframe class="marquee" src="https://tracker.gg/overlays/overlay/fe174a33-4b60-4bcd-aed6-3188dbf1d432"></iframe>
<iframe class="marquee" src="https://tracker.gg/overlays/overlay/7c1a3a59-7540-4c15-a5b4-24d19dbd5880"></iframe>
<iframe class="marquee" src="https://tracker.gg/overlays/overlay/ebc95461-8851-4576-a8bf-0f8aec7c9d46"></iframe>
<iframe class="marquee" src=""></iframe>
<iframe class="marquee" src=""></iframe>
</div>
</body>
</html>
PHP Dynamic Marquee一次滚动一个项目
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.