Бегущая строка javascript html

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

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

Самый простой вариант использовать два блока #quotes друг за другом на необходимом расстоянии, и просто в нужный вам момент запускать второй. Что касается подтормаживаний браузер сам оптимизирует частоту кадров при хорошей графической карте и оптимизации системы никаких подтормаживайний не будет.

2 ответа 2

С подходом — «каждому элементу свой 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); >>

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

Источник

Бегущая строка javascript html

БлогNot. Бегущая строка на Javascript и CSS3

Бегущая строка на Javascript и CSS3

Был когда-то, а точней, и сейчас есть нестандартный, но широко применяемый тег , создающий эффект бегущей строки: Привет, мир!

Намного ли сложнее сделать то же самое средствами Javascript, дабы избежать невалидного HTML? Если мы согласны не гонять строчку по всей ширине экрана, то ненамного, приведу работающий пример и его код:

 
  
А вот полноценная эмуляция потребует применения JQuery и/или написания заметно более сложного кода.
Есть Marquee и в CSS3, выглядит перспективно и программирования не требует вовсе, правда, сильно устаревшие браузеры CSS3 не поддерживают. Приведу пример, стиль которого предполагает ещё и остановку прокрутки строки при наведении мыши на текст.
  
 
13.09.2017, 15:04 [22274 просмотра] 
Источник
 
JavaScript | Как создать бегущую строку?
 
В этом примере у нас бегает строка, которая является заголовком h1 данной страницы.
 
За движение строки отвечает функция сдвига строки и интервальный таймер.
 
Для простоты видимости движения мы указали время в пол секунды — 500 миллисекунд. Чтобы было заметно.
 
Интервальный таймер вызывает функцию, которая принимает объект HTML-элемента и меняет у него содержимое свойства textContent.
 
Информационные ссылки
 
Вам также может понравиться
 
 
 
document.getElementsByTagName(«slot») 
 
Команда document.getElementsByTagName(«slot») возвращает HTML-коллекцию HTML-элементов со страницы (документа). Элементы коллекции тянут за собой всех потомков. Забор данных осуществляется в древовидном порядке, […] 
 
JavaScript | Цикл в цикле 
 
Работая с данными, в какой-то момент понимаешь, что не всё можно представить в виде линейной информации. Например, если мы говорим о текстах, […] 
 
 
DOM | Миксин Slottable 
 
IDL interface mixin Slottable < readonly attribute HTMLSlotElement? assignedSlot; >; Element includes Slottable; Text includes Slottable; 1 Получатель атрибута assignSlot должен возвращать […] 
 
JavaScript | Функция проверки, что строка начинается на что-то 
 
Напишем функцию на JavaScript, которая возвращает истину (true), если строка начинается на передаваемое в неё значение или ложь (false), если строка не […] 
Источник
 
Как создать вертикальную непрерывную бегущую строку?
 
Может кто подскажет, как создать вертикальную бесконечную бегущую строку,которая не будет прерываться. В идеале текст еще и должен исчезать на дне блока (article), хотелось бы, без использования линейного градиента. Видимо, силами CSS в этом не разобраться.
 
article < width: 100%; margin: 0 auto; position: absolute; overflow: hidden; height: 65%; left: 0; right: 0; top: 0; bottom: 0; >.text-animation pre < position: absolute; font-weight: 400; font-size: 1.5rem; text-decoration: none; text-align: start; letter-spacing: .3rem; transform: translatey(-100%); animation-name: matrix; animation-duration: 30s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; background: none; border: none; margin: 0; padding: 0; line-height: 1; color: black; word-break: normal; word-wrap: normal; overflow: hidden; white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ >@keyframes matrix < 0% < transform: translatey(-100%); >50% < transform: translatey(0%); >100% < transform: translatey(100%); >> .text-animation pre:nth-child(1) < left: -25%; font-size: 1.65em; animation-delay: 15s; >.text-animation pre:nth-child(2) < left: -25%; font-size: 1.65em; animation-duration: 10s; >.basket
 
 
 
 
s s s s s s s s s s s s s
 
g g g g g g g g g g g g
 
r r r r r r r r r r r r
 
 
 
 
1 ответ 1
 
Не пугаемся длинного кода - JS для красоты (снова увлёкся))) и не обязателен для решения стартового вопроса. Собственно сама "бегушка" реализована на CSS (вся "магия" в трёх последних правилах), разметке и позиционировании. Принцип прост, если не сказать примитивен:
 
 
контейнер-обёртка с position: absolute; и overflow: hidden; ;
 
контейнер для текста с position: relative; на который навешана вся анимация;
 
сам текст, который должен повторятся два раза (важно! - без пробелов, переводов и отступов).
 
 
Т.е. ничего необычного. Дъявол в деталях.
 
Почему-то самая частая ошибка - это проскролить сразу всю строку на >100%, не думая, что будет в конце строки. А будет скачок анимации к нулевому кадру, где расположено начало строки. Т.о. попытка заменить обрезанный хвост строки осмысленным началом - это неверный путь. 
Второй вариант - "добить" пробелами и/или проскролить строку (контейнер), как можно дальше. Тоже неправильный подход, ибо разные размеры шрифтов и т.п.
 
Здесь алгоритм прост: строку, при вводе один раз дублируем. Теперь строка может начинаться два раза - с начала и с середины. Прокручиваем на 50% строку, т.е. до середины. Далее, уже идёт повтор строки. Вот тут-то и надо переходить к началу анимации, т.е. сбрасывать в начало. 
Так организуется циклически повторяющаяся анимация без "прыжков".
 
window.onload = function() < let oSectionWrap = document.querySelector('section.wrap'); let oRefRunningStr = oSectionWrap.querySelector('article.text-animation'); let ofragment = document.createDocumentFragment(); let nQ = 3.5; // (0-99) Чем меньше коэффициент, тем больше количество бегущих строк (Осторожно с большим количеством - нагрузка на ЦП и ГП!) for (let i = nQ; i < 100; i += nQ) < let oNewRunningStr = oRefRunningStr.cloneNode(true); // let sRandomStr = 'Своя строка (должна быть больше, чем высота контейнера)'; // Чем длиннее строка, тем быстрее она будет бежать на экране. let sRandomStr = fRandomStr(); oNewRunningStr.style.left = i + '%'; oNewRunningStr.style.zIndex = (i % 2) ? '100' : '0'; oNewRunningStr.firstElementChild.innerHTML = sRandomStr + sRandomStr; ofragment.appendChild(oNewRunningStr); >oSectionWrap.appendChild(ofragment); > function fRandomStr() < let sResultStr = ''; //let sArrayChars = '01010101010101010101'; // (для символов двоичного кода) let sArrayChars = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'; let nNumbChars = sArrayChars.length - 1; let nRandNumbChars = Math.floor(Math.random() * 300) + 75; let nPosChar; for (let i = 0; i < nRandNumbChars; ++i) < nPosChar = Math.floor(Math.random() * nNumbChars); sResultStr += sArrayChars.substring(nPosChar, nPosChar + 1); >return sResultStr; >
 
* < box-sizing: border-box; margin: 0; padding: 0; >.wrap < background: url('//www.pcrevue.sk/files/photo/2017-03/25643/6c53a5/C5vo9MV.jpg') #333; font: bold 15vh 'Courier New', monospace; height: 100vh; position: relative; >.WrapScroller < height: 5em; position: absolute; z-index: 5; >.TitleScroller < font: 2em/1em 'Arial Black'; text-shadow: 0 0 45px rgba(56, 253, 44, 0.95); >.basket < background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); border: 5px solid black; bottom: 0; height: 30vh; left: 0; position: absolute; width: 100%; z-index: 6; >.text-animation < height: 100%; overflow: hidden; position: absolute; >.text-animation div < animation-delay: 0s; animation-duration: 50s; animation-iteration-count: infinite; animation-name: matrix; animation-play-state: running; animation-timing-function: linear; color: #080; font: 5vh 'Courier New', monospace; position: relative; text-align: center; text-shadow: 0 0 1px rgba(87, 255, 0, 0.93); transform: translatey(-100%); width: 1em; word-wrap: break-word; >@keyframes matrix < 0% < transform: translatey(-50%); >100% < transform: translatey(0%); >>
 
 
 будет всегда актуален. Он как JQuery, но только в один тег :-) --> MATRIX   
Может кто подскажет,как создать вертикальную бесконечную бегущую строку,которая не будет прерываться.В идеале текс еще и должен исчезать на дне блока (article),вот только бы, без использования линейного градиента. Видимо,силами CSS в этом не разобраться.Может кто подскажет,как создать вертикальную бесконечную бегущую строку,которая не будет прерываться.В идеале текс еще и должен исчезать на дне блока (article),вот только бы, без использования линейного градиента. Видимо,силами CSS в этом не разобраться.
 
 
 
Как я уже написал выше, основная масса кода для наглядности, и может быть сокращена в два-три раза. В коде есть пояснения по основным блокам и параметрам. Но, если возникнут вопросы - комментируйте.
 
P.S. Ах, да. По в второму вопросу: пока не придумали градиент для текста, который бы не взаимодействовал с background-ом. Т.ч. плавное исчезновение только при наложении фона с градиентом.
 
Источник