Изменение продолжительности перехода webkit с помощью javascript

Question

Изменение продолжительности перехода webkit с помощью javascript

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

.marquee {
/* margin-left: auto;
margin-right: auto; */
width: 800px;
height: 25px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
border: 1px solid #FF0000;
background: GhostWhite;
color: black;
font-size: 20px;
}

.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 20s linear infinite;
}/* Make it move */
@keyframes marquee {
0%   { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}

В html я запускаю span следующим образом:

 <p class="marquee"><span><?php echo getEvents(); ?></span></p>

getEvents () — функция php, которая заполняет тикер; Исходя из этого, я хотел бы определить длину текста, чтобы регулировать скорость текста

0

php webkit

Решение

Другие решения

если вы измените свой HTML так, чтобы

<p class="marquee" id="mID">

Вы можете использовать JavaScript для управления элементами вашего

document.getElementById("mID").style.WebkitTransitionDuration = "1s"; // Code for Safari 3.1 to 6.0
document.getElementById("mID").style.transitionDuration = "1s";

0

Источник

Accepted Answer

Это 20s в animation директива, которая говорит, сколько времени текст должен перемещаться через свой контейнер. Короткий текст будет двигаться медленно, чтобы покрыть расстояние за 20 секунд. Гораздо более длинный текст должен будет двигаться намного быстрее.

Смотрите это JSfiddle: https://jsfiddle.net/s40e3Lng/2/

Следующий JS / jquery устанавливает time пересечь <p> к формуле, основанной на lenСтрока строки внутри.

$('p.marquee span').each(function() {
var len = $(this).html().length;
var speed = 100;
var time = 4 + (4*len)/speed;
$(this).attr('style', 'animation: marquee '+time+'s linear infinite;');
});

В JSfiddle вы можете поиграть с формулой, пока не получите желаемую скорость. Просто измените код JS и нажмите «Выполнить» в верхнем левом углу.

1