// Sample items to add to the news-ticker
let sampleNewsItems = [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"Vivamus enim magna, elementum in consectetur sit amet, porta ut eros"
];
// Iterate through the sample news items and process accordingly
let nextTimeoutDur;
for (let x = 0; x < sampleNewsItems.length; x++) {
let screenWidth = $(window).innerWidth();
$('.ticker-wrap').width(screenWidth);
$(".ticker-wrap").append('<div class="ticker-item" data-index="' + x + '"><span class="tickerContent"></span></div>');
$('.ticker-item[data-index="' + x + '"] .tickerContent').html(sampleNewsItems[x]);
let newsItemLength = 500;
$('.ticker-item[data-index="' + (x - 1) + '"]').outerWidth(500);
let tickerDur = 7;
nextTimeoutDur = x > 0 ? (tickerDur * newsItemLength) / screenWidth : 0;
$(".ticker-item[data-index=" + x + "]").css("animation", "ticker " + tickerDur + "s linear " + nextTimeoutDur + "s infinite");
}
@keyframes ticker {
0% {
transform: translate3d(100vw, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
width: 100%;
}
.ticker-wrap .ticker-item {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ticker-wrap"></div>
Я бы хотел, чтобы второй элемент тикера полностью отсутствовал в области просмотра, прежде чем он исчезнет, поэтому я установил transform: translate3d(-100%, 0, 0); для 100%ключевой кадр.Однако второй элемент тикера исчезает из области просмотра, как только исчезает первый.Почему это так?И как я могу это исправить?
Вот CodePen с моим кодом.
https://codepen.io/prizzi13/pen/JwGmGE