1

我正在努力实现的一个很好的例子是https://aboutface.com上的自动收报机效果

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

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

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

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

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

4

2 回答 2

3

适用width:100%于.msg. 如果我们想在左右两边应用 12px 的内边距，我们可以使用 CSScalc()从 100% 中减去 24px。

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

以下示例在容器中保留 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>

于 2021-06-12T19:44:47.650 回答
2

获得连续滚动效果的一种简单方法是拥有两个消息副本，并以仅占总宽度 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。

于 2021-06-12T20:10:15.617 回答