带有多条消息的连续滚动自动收报机/字幕 - 需要 JS 插件吗？

如何解决带有多条消息的连续滚动自动收报机/字幕 - 需要 JS 插件吗？

我正在努力实现的一个很好的例子是 https://aboutface.com

上的股票代码效果

基于另一个例子，我不久前看到了这个。但是正如您所看到的，消息被裁剪，您看不到第二条消息进入屏幕。滚动/可见区域应跨越白框的宽度 - 或每边 12px 与左/右填充。

https://jsfiddle.net/ho34yvtL/1/

此外，我想这在桌面上会出现问题，因为您需要更多重复的消息。现在，如果我可以连续显示 1 条消息，那就太好了。但理想情况下，我想支持多个。

所以基本上我希望文本在每个项目之间设置间距在屏幕上连续滚动。因此，如果空间允许，您可以同时看到多条消息，这与旧式 marquee 标签不同。

如果我想要实现的目标是不可能的，是否有首选方法、插件或需要复杂/自定义的 javascript？

解决方法

将 width:100% 应用到 .msg。如果我们想在左右两边应用 12px 的填充，我们可以使用 CSS calc() 从 100% 中减去 24px。

此外，可以将 margin-left:50px 应用于消息以获得两者之间的 50 像素间距。

以下示例在容器中保留 12 像素的内边距，同时在每个项目之间保持 50 像素的间距。

body {
  background: red;
}

.page-head {
  background: white;
  box-sizing: border-box;
  padding: 0;
  position: fixed;
  top: 0;
  width: 375px;
}

/**
 * Ticker
 */

.page-head__ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Arial";
  font-size: 11px;
  font-weight: Bold;
  height: 36px;
  line-height: 1;
  padding: 0 12px;
  text-transform: uppercase;
}

.msg {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width:calc(100% - 24px);
}

.msg span {
  animation: marquee 6s linear infinite;
  display: inline-block;
  padding-left: calc(100% - 24px);
  margin-left:50px;
}

.msg--two span {
  animation-delay:3s;
  margin-left:50px;
}

@keyframes marquee {
  0% {
    transform: translate(0,0);
  }

  100% {
    transform: translate(-100%,0);
  }
}

<header class="page-head">

  <div class="page-head__ticker">
    <p class="msg"><span>Free Shipping on orders over $50</span></p>
    <p class="msg msg--two"><span>Free Shipping on orders over $50</span></p>
  </div>

</header>

获得连续滚动效果的一种简单方法是将消息复制两份，并使用仅占总宽度 50% 的动画滚动。这样就很顺利了——所有的消息都通过了，然后重新开始，“覆盖”了第二个副本。

这是一个片段 - 消息之间有 24 像素，但当然可以更改此类样式以适合您的需要。

body {
  background: red;
}

.page-head {
  background: white;
  box-sizing: border-box;
  padding: 0;
  position: fixed;
  top: 0;
  width: 375px;
}


/**
 * Ticker
 */

.page-head__ticker {
  font-family: "Arial";
  font-size: 11px;
  font-weight: Bold;
  height: 36px;
  line-height: 1;
  padding: 0 12px;
  text-transform: uppercase;
  overflow: hidden;
}

.msg {
  rmargin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 6s linear infinite;
  display: inline-block;
}

span {
  padding-left: 24px;
  /* to give a gap between messages */
}

@keyframes marquee {
  0% {
    transform: translate(0,0);
  }
  100% {
    transform: translate(-50%,0);
    /* changed from 100% */
  }
}

<header class="page-head">

  <div class="page-head__ticker">
    <p class="msg"><span>Free Shipping on orders over $50</span><span>And here is the second message</span><span>Free Shipping on orders over $50</span><span>And here is the second message</span></p>
  </div>

</header>

如果您的消息总体上太短而无法覆盖分配给选取框的窗口，您可能需要增加例如之间的间隙。有一点JS。