Как сделать постоянно бегущую строку?

Question

есть блок

.history-content__marquee {
  width: 100%;
  font-size: 3.375rem;
  line-height: 4.375rem;
}

.node-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  height: 100px;
  &__el {
    position: absolute;
    top: 0px;
    left: 0px;
    display: inline-block;
  }
}

<div class="history-content__marquee">
  <div class="marquee node-marquee">
    <div class="node-marquee__el">девяностые 90-е —</div>
    <div class="node-marquee__el">&nbsp;девяностые 90-е —</div>
    <div class="node-marquee__el">&nbsp;девяностые 90-е —</div>
    <div class="node-marquee__el">&nbsp;девяностые 90-е —</div>
  </div>
</div>

как сделать его постоянно бегущим как вот здесь?

Answer 1

Есть плагин jQuery.Marquee - duration указывает время прокрутки, stratVisible делает так, чтобы линию сразу было полностью видно, а duplicated делает текст бесконечным.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>

<div class='marquee' style='overflow:hidden'>девяностые 90-е — девяностые 90-е — девяностые 90-е —</div>

CSS:

.marquee {
  font-size: 3.375rem;
}

JS (jQuery):

$(function() {
  $('.marquee').marquee({
    duration: 7000,
    startVisible: true,
    duplicated: true
  });
});

БЛОГ НА HUSL

Как сделать постоянно бегущую строку?

Ответы (1 шт):