Почему дергается текст в бесконечной бегущей строке?
Спустя какое время текст начинает дергаться, не понимаю почему
<div class="running_line"> <div class="line_inner"> <span class="font_nav running_line_text">put some fire in your belly</span> <span class="font_nav running_line_text">put some fire in your belly</span> <span class="font_nav running_line_text">put some fire in your belly</span> <span class="font_nav running_line_text">put some fire in your belly</span> <span class="font_nav running_line_text">put some fire in your belly</span> </div> </div> |
<div class="running_line"> <div class="line_inner"> <span class="font_nav running_line_text">put some fire in your belly</span> <span class="font_nav running_line_text">put some fire in your belly</span> <span class="font_nav running_line_text">put some fire in your belly</span> <span class="font_nav running_line_text">put some fire in your belly</span> <span class="font_nav running_line_text">put some fire in your belly</span> </div> </div>
.running_line_text { font-size: 17px; line-height: 25.92px; margin: 0 28px 0 28px; } .running_line { box-sizing: border-box; width: 697px; height: 78px; border: 1px solid #000; display: flex; align-items: center; overflow: hidden; } .line_inner { display: flex; width: 200%; animation: running_line 10s linear infinite; white-space: nowrap; } .running_line span { white-space: nowrap; width: 100%; } @keyframes running_line { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } |
.running_line_text { font-size: 17px; line-height: 25.92px; margin: 0 28px 0 28px; } .running_line { box-sizing: border-box; width: 697px; height: 78px; border: 1px solid #000; display: flex; align-items: center; overflow: hidden; } .line_inner { display: flex; width: 200%; animation: running_line 10s linear infinite; white-space: nowrap; } .running_line span { white-space: nowrap; width: 100%; } @keyframes running_line { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
Дополнительно:
дёргается, потому что анимация заканчивается и блок возвращается на ту позицию на которой был изначально
если нужен бесконечный текст бегущий текст, нужно анимировать 2 блока
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда текст дергается в бесконечной бегущей строке, обычно связана с неправильной настройкой CSS или JavaScript кода. Вот несколько возможных причин и способов их решения:
1. Проблема с CSS анимацией: Если используется CSS анимация для создания бегущей строки, возможно, что скорость анимации неправильно настроена или используются ненужные свойства, которые могут вызывать дергание. Рекомендуется проверить CSS код и убедиться, что анимация настроена правильно.
@keyframes run-text { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .running-text { animation: run-text 10s linear infinite; }
2. Проблема с JavaScript: Если бегущая строка реализована с помощью JavaScript, возможно, что код не оптимизирован или используются ненужные вычисления, что может вызывать дергание. Рекомендуется проверить JavaScript код и убедиться, что он оптимизирован.
function runText() { const container = document.querySelector('.running-text'); let position = 0; setInterval(() => { position -= 1; container.style.transform = `translateX(${position}px)`; }, 10); } runText();
3. Проблема с контентом: Если контент в бегущей строке слишком длинный или содержит неожиданные символы, это также может вызвать дергание. Рекомендуется проверить контент и убедиться, что он оптимизирован для бегущей строки.
Надеюсь, что один из этих способов поможет вам решить проблему с дергающимся текстом в бесконечной бегущей строке. Если проблема остается, пожалуйста, предоставьте больше информации или кода, чтобы мы могли помочь вам более точно.