如何在HTML中滑动句子中的单词

Is it possible, using css or Javascript to silde a word in a sentence? I've the below, for sliding text. When the second sentence is shown, the word 'Data' to be then replaced with Process, then Technology, then Formula. Until all the words are shown the next sentence should not be shown.

是否可以使用css或Javascript来句子中的单词?我在下面,为了滑动文字。当显示第二个句子时,然后将“数据”一词替换为“处理”,“技术”,“公式”。在显示所有单词之前,不应显示下一句。

Tried using setInterval, get the display text from the div using innerText and write conditions to remove/re-add class. But, innerText always giving all the text inside the div.

尝试使用setInterval,使用innerText从div获取显示文本,并写入条件以删除/重新添加类。但是,innerText总是在div中提供所有文本。

HTML:

<div class="tag-slider">
    <div class="marquee down" id="marquee-down-text">
        <p>Manage collaborative process</p>
        <p>Three level security to protect your Data</p>
    </div>
</div>

CSS:

.marquee.down p {
    transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -webkit-transform:translateY(-100%);
}

.marquee.down p:nth-child(1) {
    animation: down-one 10s ease infinite;
    -moz-animation: down-one 10s ease infinite;
    -webkit-animation: down-one 10s ease infinite;
}

.marquee.down p:nth-child(2) {
    animation: down-two 10s ease infinite;
    -moz-animation: down-two 10s ease infinite;
    -webkit-animation: down-two 10s ease infinite;
}

1 个解决方案

#1

You can achieve this via CSS-animations:

您可以通过CSS动画实现此目的:

.sliding-words-wrapper {
  vertical-align: top;
  display: inline-block;
  overflow: hidden;
  /* set height to fit one item */
  height: 18.4px;
}

.sliding-words {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  top: 0;
  animation: slide-words 10s linear infinite;
}

@keyframes slide-words {
  from {
    top: 0;
  }
  to {
    /* (Word count - 1) * 100% */
    top: -300%;
  }
}

<div class="tag-slider">
  <div class="marquee down" id="marquee-down-text">
    <p>Manage collaborative process</p>
    <div>Three level security to protect your
      <div class="sliding-words-wrapper">
        <div class="sliding-words">
          <span>Data</span>
          <span>Process</span>
          <span>Technology</span>
          <span>Formula</span>
        </div>
      </div>
    </div>
  </div>
</div>

If you need to show this animation after some event (e.g. showing text) you can set its state to paused (via CSS property animation-play-state: paused), then after some event to animation-play-state: running via JavaScript.

如果您需要在某个事件(例如显示文本)后显示此动画,您可以将其状态设置为暂停(通过CSS属性animation-play-state:paused),然后在某个事件之后设置为动画播放状态:通过JavaScript运行。