Бегущая строка анимация

#javascript #html #css

Есть бегущая строка 



body {
  margin: 0;
  padding: 0;
}

#quotes-container {
  width: 100%;
  height: 51px;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  white-space: nowrap;
}

#quotes {
  display: inline-block;
  font-family: "Tahoma";
  padding: 1em 1em 1em 100%;
  margin: 0;
  animation: scroll 30s infinite linear;
}

#quotes li {
  display: inline-block;
  margin-right: 40px;
  font-weight: bold;
  list-style: none;
  color: #fff;
  width: 210px;
}

#quotes li span {
  margin: 0 10px;
  font-weight: normal;
  color: #aab9d1;
}

#quotes li span:nth-child(odd) {
  position: relative;
}

#quotes li span:nth-child(odd):after {
  position: absolute;
  top: 0;
  right: -14px;
  content: "|";
}

#quotes li.up span:nth-child(odd) {
  position: relative;
  margin-left: 20px;
}

#quotes li.up span {
  color: #00ca51;
}

#quotes li.up span:nth-child(odd):before {
  position: absolute;
  left: -14px;
  top: 6px;
  content: ' ';
  border-width: 0 5px 9px 5px;
  border-style: solid;
  border-color: #00ca51 transparent;
}

#quotes li.down span:nth-child(odd) {
  position: relative;
  margin-left: 20px;
}

#quotes li.down span {
  color: #f12424;
}

#quotes li.down span:nth-child(odd):before {
  position: absolute;
  left: -14px;
  top: 6px;
  content: ' ';
  border-width: 9px 5px 0 5px;
  border-style: solid;
  border-color: #f12424 transparent;
}

#quotes li.round span:nth-child(odd) {
  position: relative;
  margin-left: 20px;
}

#quotes li.round span:nth-child(odd):before {
  position: absolute;
  left: -14px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: #aab9d1;
  content: ' ';
}

-webkit-keyframes scroll 0% {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0)
}

-webkit-keyframes scroll 100% {
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0)
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
  100% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0)
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
  100% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0)
  }
}

  

    
Ripple0.62970.6314
    
Litecoin159.06161.25
    
Ethereum518.4522.21
    
USDCHF0.94670.9468
    
USDJPY104.903104.911
    
EURCAD1.591991.592
    
Dash407.87410.39
    
AUDUSD0.772410.77249
    
Bitcoin84368456.1
    
NZDUSD0.727070.72717
    
EURUSD1.237421.23762
    
AUDCAD0.99370.9942
    
GBPUSD1.416511.41656
  





Никак не могу понять, как сделать так, чтобы не было такого большого промежутка между
заходом за пределы экрана и выходом, т.е. сделать так, чтобы строка еще до конца не
ушла за пределы экрана слева, а справа уже появляется.

И еще: бывает, что анимация начинает притормаживать через некоторое время. Как быть
с этим?

Спасибо!
    

Ответы

Ответ 1

С подходом — "каждому элементу свой ID" — я не согласен и хотел бы пояснить.

ID — это уникальный идентификатор для конкретного элемента. Ключевое слово здесь
— "уникальный" и оно подразумевает, что такой ID будет только один на странице. При
использовании данного атрибута, теряется "гибкость" в манипуляциях с элементами (к
примеру, клонирование или создание элемента с таким же значением ID). Появление элементов
с одинаковым идентификатором может привести к непредсказуемым результатам — где-то
может обрабатываться только первый элемент, а где-то код может оказаться полностью
неработоспособным. Поэтому, применение ID должно быть там, где это действительно оправданно
и/или необходимо.

В большинстве случаев, можно и нужно использовать другие способы доступа к элементам:


по пользовательским атрибутам (data-attr);
по именам классов и другим CSS-селекторам, с помощью querySelector;
по дочерним элементам, используя children[].


В коде из вопроса, значения ID вложенных элементов отличаются от родительского идентификатора,
только префиксами (bid и ask) и более никакой полезной нагрузки не несут. При этом,
структура всех пунктов одинакова. В этом случае, меняем атрибут id на пользовательский
атрибут data-curr, а далее, обращаемся к потомкам с помощью children[n], т.к. эти элементы
всегда стоят в одном и том же порядке. Таким образом, можно будет клонировать и создавать
элементы, не боясь дублирования ID.

Я уже описывал здесь алгоритм и самую распространённую ошибку "бегущей строки" с
помощью animation, т.ч. повторяться не буду. Добавлю только, что для правильной работы
данного подхода, есть обязательное условие - ширина (высота, для вертикальной строки)
скроллируемого элемента должна быть вдвое больше максимальной ширины (высоты) контейнера,
в котором элемент прокручивается.



window.onload = function() {
  var oQuotes = document.querySelector('#quotes-container ul.quotes');

  /* Функция дублирования пунктов */
  function fDoublingQuotes() {
    let nElem = oQuotes.children.length;
    for (let i = 0; i < nElem; i++) {
      oQuotes.appendChild(oQuotes.children[i].cloneNode(true));
    }
    oQuotes.style.animationDuration = '1s,' + (nElem * 2) + 's';
  }

  /* Функция для изменения значений пунктов */
  function fSetQuote(sId, sClass, sBid, sAsk) {
    let aQuotes = oQuotes.querySelectorAll('li[data-curr="' + sId + '"]');
    aQuotes.forEach(function(item) {
      item.className = sClass || item.className;
      item.children[0].innerText = sBid || item.children[0].innerText;
      item.children[1].innerText = sAsk || item.children[1].innerText;
    });
  }

  document.querySelector('button').addEventListener('click', function() {
    fSetQuote('Ripple', '', '0', '1');
  });

  fDoublingQuotes();
}
body {
  margin: 0;
  padding: 0;
}

#quotes-container {
  position: relative;
  height: 51px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.8);
}

#quotes-container:before,
#quotes-container:after {
  content: '';
  position: absolute;
  height: 51px;
  width: 25px;
  top: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.0));
}
#quotes-container:after {
  right: 0;
  transform: scaleX(-1);
}

.quotes {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 0; /* Важно! */
  animation: begin 1s ease forwards, scroll 30s linear 1s infinite;
}

.quotes li {
  display: inline-block;
  margin: 1em 40px 1em 0;
  font: bold 16px 'Tahoma';
  list-style: none;
  color: #fff;
}

.quotes li span {
  margin: 0 10px;
  font-weight: normal;
  color: #aab9d1;
}

.quotes li span:nth-child(odd) {
  position: relative;
}

.quotes li span:nth-child(odd):after {
  content: '|';
  position: absolute;
  right: -14px;
  top: -1;
}

.quotes li.up span:nth-child(odd),
.quotes li.down span:nth-child(odd),
.quotes li.round span:nth-child(odd) {
  margin-left: 20px;
}

.quotes li.round span:nth-child(odd):before {
  content: '⚫';
  position: absolute;
  left: -16px;
  top: 0px;
}

.quotes li.up span {
  color: #00ca51;
}
.quotes li.up span:nth-child(odd):before {
  content: '▲';
  position: absolute;
  left: -18px;
  top: 1px;
}

.quotes li.down span {
  color: #f12424;
}
.quotes li.down span:nth-child(odd):before {
  content: '▼';
  position: absolute;
  left: -18px;
  top: 1px;
}

@keyframes scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
@keyframes begin {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

  

    
Ripple0.62970.6314
    
Litecoin159.06161.25
    
Ethereum518.4522.21
    
USDCHF0.94670.9468
    
USDJPY104.903104.911
    
EURCAD1.591991.592
    
Dash407.87410.39
    
AUDUSD0.772410.77249
    
Bitcoin84368456.1
    
NZDUSD0.727070.72717
    
EURUSD1.237421.23762
    
AUDCAD0.99370.9942
    
GBPUSD1.416511.41656
  






Если что-то будет непонятно по коду и логике, то спрашиваем в комментариях - отвечу
или дополню ответ.


Ответ 2

Как вариант ...



* {
  list-style: none;
}

.wrapper {
  width: 100%;
  overflow: hidden
}

ul {
  display: flex;
  justify-content: space-around;
  position: relative;
  width: 200%;
  animation: scroll 10s infinite linear;
}

li {
  text-align:center;
  background:#fbfbfb;
}

@keyframes scroll {
  0% {
    left: 0%;
  }
  100% {
    left: -110%;
  }
}

  

    
item1
    
item2
    
item3
    
item4
    
item5
    
item6
    
item7
    
item8
    
item9
    
item10
  





либо такой вариант : https://codepen.io/topicstarter/pen/OvxxXP?editors=1100