如何制作在屏幕上水平滑动的文字？

Question

我正在尝试制作一个在屏幕上水平滑动的文字，文字不能停止移动。这是我到目前为止所做的：

setInterval(showQuote, 5000);

function showQuote() {
  $('.hey').fadeOut(function() {
    // remove visible class from old quote and add it to new
    // get next quote and fadeIn() when fadeout finishes
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hey">
  <blockquote>Quote goes here</blockquote>
  <p class="quoteBy">Author</p>
</div>

<div class="quote">
  <blockquote>Second Quote goes here</blockquote>
  <p class="quoteBy">Author</p>
</div>

你能帮我吗？

Answer 1

使用纯CSS动画和一些JS魔法

我是在 JQuery 和 Animate.css 的帮助下做到的，这是你想要的吗？

您可以访问 Animate.css 库here。

***我稍微更改了原始代码。

＆＃13;

＆＃13;

function animateElementsOneByOne(selector, action, interval) {
  var elements = $(selector).toArray();
  var index = 0;
  var timeout = function() {
    setTimeout(function() {
      action(elements[index]);
      if (index + 1 < elements.length) {
        index++;
        timeout();
      }
    }, interval);
  }
  if (elements.length > 0)
    timeout();
}

animateElementsOneByOne('.quote', function(element) {
  element.style.visibility = 'visible';
  $(element).addClass('animated slideInLeft');
}, 1000);

＆＃13;

.quote {
  visibility: hidden;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="quote">
  <blockquote>
    <p>Quote goes here</p>
    <p class="quote-by">Author</p>
  </blockquote>
</div>

<div class="quote">
  <blockquote>
    <p>Second Quote goes here</p>
    <p class="quote-by">Author</p>
  </blockquote>
</div>

<div class="quote">
  <blockquote>
    <p>Third Quote goes here</p>
    <p class="quote-by">Author</p>
  </blockquote>
</div>

＆＃13;

＆＃13;

＆＃13;