javascript - 使不同长度的文本以相同的速度滚动
问题描述
我有几行在悬停时向左滚动的文本,目前它们都以不同的速度滚动,具体取决于跨度标签内有多少文本。无论文本长度如何,如何使它们都以相同的速度滚动?我想这可以通过一些 javascript 实现,但我不确定。
.menu {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
--marquee-width: 100vw;
--offset: 20vw;
--move-initial: calc(-25% + var(--offset));
--move-final: calc(-50% + var(--offset));
--item-font-size: 10vw;
counter-reset: menu;
}
.menu__item {
cursor: default;
position: relative;
padding: 0 50px;
}
@media only screen and (max-width: 600px) {
.menu__item {
cursor: default;
position: relative;
padding: 0 20px;
}
}
.menu__item-link {
display: inline-block;
cursor: pointer;
position: relative;
}
.menu__item-link::before {
all: initial;
font-family: sofia-pro, sans-serif;
position: absolute;
bottom: 60%;
left: 0;
pointer-events: none;
}
.menu__item-link:hover {
transition-duration: 0.1s;
opacity: 0;
}
.marquee {
position: absolute;
top: 0;
left: 0;
width: var(--marquee-width);
overflow: hidden;
pointer-events: none;
}
.marquee__inner {
width: fit-content;
display: flex;
position: relative;
transform: translate3d(var(--move-initial), 0, 0);
animation: scroll 5s linear infinite;
animation-play-state: paused;
opacity: 0;
transition: opacity 0.1s;
}
.menu__item-link:hover ~ .marquee .marquee__inner {
animation-play-state: running;
opacity: 1;
transition-duration: 0.4s;
z-index: 9999;
}
.menu__item-link, .marquee span {
white-space: nowrap;
font-size: 8vw;
padding: 0 1vw;
font-weight: 900;
line-height: 1.15;
}
.marquee span {
font-style: italic;
-webkit-text-stroke: 3px #FB4D98;
text-stroke: 3px #FB4D98;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
transition: opacity 0.1s;
letter-spacing: 1.5px;
}
@keyframes scroll {
0% {
transform: translate3d(var(--move-initial), 0, 0);
}
100% {
transform: translate3d(var(--move-final), 0, 0);
}
}
<nav class="menu">
<div class="menu__item">
<a class="menu__item-link" target="_blank">DJ SNAKE</a>
<div class="marquee">
<div class="marquee__inner" aria-hidden="true">
<span>DJ SNAKE</span>
<span>DJ SNAKE</span>
<span>DJ SNAKE</span>
<span>DJ SNAKE</span>
</div>
</div>
</div>
</nav>
<nav class="menu">
<div class="menu__item">
<a class="menu__item-link" target="_blank">AXWELL INGROSSO</a>
<div class="marquee">
<div class="marquee__inner" aria-hidden="true">
<span>AXWELL INGROSSO</span>
<span>AXWELL INGROSSO</span>
<span>AXWELL INGROSSO</span>
<span>AXWELL INGROSSO</span>
</div>
</div>
</div>
</nav>
<nav class="menu">
<div class="menu__item">
<a class="menu__item-link" target="_blank">ELIJAH</a>
<div class="marquee">
<div class="marquee__inner" aria-hidden="true">
<span>ELIJAH</span>
<span>ELIJAH</span>
<span>ELIJAH</span>
<span>ELIJAH</span>
</div>
</div>
</div>
</nav>
解决方案
一种解决方案是将宽度定义为所有 div 的宽度相同。
/*(function() {
var mySpans = document.querySelectorAll(".marquee__inner");
var elementSpanWidth = 0;
mySpans.forEach((span) => {
if(span.offsetWidth > elementSpanWidth)
elementSpanWidth = span.offsetWidth;
});
console.log(elementSpanWidth);
mySpans.forEach((span) => {
span.style.width = elementSpanWidth;
});
})();*/
.menu {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
--marquee-width: 100vw;
--offset: 20vw;
--move-initial: calc(-25% + var(--offset));
--move-final: calc(-50% + var(--offset));
--item-font-size: 10vw;
counter-reset: menu;
}
.menu__item {
cursor: default;
position: relative;
padding: 0 50px;
}
@media only screen and (max-width: 600px) {
.menu__item {
cursor: default;
position: relative;
padding: 0 20px;
}
}
.menu__item-link {
display: inline-block;
cursor: pointer;
position: relative;
}
.menu__item-link::before {
all: initial;
font-family: sofia-pro, sans-serif;
position: absolute;
bottom: 60%;
left: 0;
pointer-events: none;
}
.menu__item-link:hover {
transition-duration: 0.1s;
opacity: 0;
}
.marquee {
position: absolute;
top: 0;
left: 0;
width: var(--marquee-width);
overflow: hidden;
pointer-events: none;
}
.marquee__inner {
width: fit-content;
display: flex;
position: relative;
transform: translate3d(var(--move-initial), 0, 0);
animation: scroll 5s linear infinite;
animation-play-state: paused;
opacity: 0;
transition: opacity 0.1s;
}
.menu__item-link:hover ~ .marquee .marquee__inner {
animation-play-state: running;
opacity: 1;
transition-duration: 0.4s;
z-index: 9999;
}
.menu__item-link,
.marquee span {
white-space: nowrap;
font-size: 8vw;
padding: 0 1vw;
font-weight: 900;
line-height: 1.15;
}
.marquee span {
font-style: italic;
-webkit-text-stroke: 3px #FB4D98;
text-stroke: 3px #FB4D98;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
transition: opacity 0.1s;
letter-spacing: 1.5px;
}
@keyframes scroll {
0% {
transform: translate3d(var(--move-initial), 0, 0);
}
100% {
transform: translate3d(var(--move-final), 0, 0);
}
}
<nav class="menu">
<div class="menu__item">
<a class="menu__item-link" target="_blank">DJ SNAKE
</a>
<div class="marquee">
<div class="marquee__inner" aria-hidden="true">
<span>DJ SNAKE</span>
<span>DJ SNAKE</span>
<span>DJ SNAKE</span>
<span>DJ SNAKE</span> </div>
</div>
</div>
</nav>
<nav class="menu">
<div class="menu__item">
<a class="menu__item-link" target="_blank">AXWELL INGROSSO
</a>
<div class="marquee">
<div class="marquee__inner" aria-hidden="true">
<span>AXWELL INGROSSO</span>
<span>AXWELL INGROSSO</span>
<span>AXWELL INGROSSO</span>
<span>AXWELL INGROSSO</span>
</div>
</div>
</div>
</nav>
<nav class="menu">
<div class="menu__item">
<a class="menu__item-link" target="_blank">ELIJAH
</a>
<div class="marquee">
<div class="marquee__inner" aria-hidden="true">
<span>ELIJAH</span>
<span>ELIJAH</span>
<span>ELIJAH</span>
<span>ELIJAH</span>
</div>
</div>
</div>
</nav>
第二种选择是使用 JavaScript 来获取最大宽度并在其他 div 上动态修复。
推荐阅读
- c# - 在 UWP 中覆盖用户的强调色
- python - 在 flask-WTF 表单中如何自定义文本字段的大小?
- unity3d - Unity - 多次按住鼠标按钮的问题
- java - 如何根据我单击的按钮更改 div 的颜色?( javascript/css/html 只有没有库)
- html - 在单行中显示子元素,除非它们溢出,然后显示单列
- javascript - "400 RecognitionAudio not set" & "InactiveRpcError" [Google text to Speech API]
- c# - 在 C# 中是否有另一种方法来链接相互关联的“if”块?
- html - 在 Flask 路由中运行无限循环
- pytorch - 如何在训练循环(以及优化器/调度器交互)中使用 Pytorch OneCycleLR?
- c++ - 编辑 R Makevars 文件以使 STAN 工作并使用 Rccp 并编译 C++