HTML-прокрутка текста шире контейнера
Я работал над этим некоторое время и еще не придумал подходящего решения.
У меня есть текст баннера, который абсолютно необходимо прокручивать/выделять. Пример, который я использую, — это биржевые данные, но это другой, определяемый пользователем на лету текст, который в конечном итоге войдет в мое окончательное решение для страницы.
Проблема, которую я пытаюсь решить, заключается в том, что текст обрезается и не полностью отображает весь текст перед повторением.
Вторичным будет плавный переход перед перезапуском. то есть действительно "круговой" цикл.
Тем не менее, это довольно стандартная «выделительная рамка» на основе HTML/CSS.
Любые идеи по вышеизложенному будут оценены.
var text = 'Symbol: BABA Open: 168.71 Latest: 166.15 Change: -2.23 Symbol: PEP Open: 115.87 Latest: 115.91 Change: 3.32 Symbol: AAPL Open: 171.47 Latest: 170.42 Change: -0.38 Symbol: AMZN Open: 1627.86 Latest: 1607.95 Change: -14.7 Symbol: FB Open: 164.7 Latest: 162.5 Change: -1.45 Symbol: NFLX Open: 359 Latest: 356.87 Change: -2.2 Symbol: USO Open: 11.61 Latest: 11.71 Change: 0.23 Symbol: NKE Open: 85.56 Latest: 85.38 Change: 0.7 Symbol: YUM Open: 94.69 Latest: 94.12 Change: 0.27 Symbol: LEE Open: 2.64 Latest: 2.61 Change: -0.02';
//text is cutoff at width of parent container
$("#marquee-text").text(text);.scroller {
height: 20px;
overflow: hidden;
position: relative;
}
.scroller p,
.scroller span {
/*font-size: 3em;*/
white-space: nowrap;
color: black;
position: absolute;
width: 100%;
/*height: 100%;*/
margin: 0;
/*line-height: 50px;*/
/*text-align: center;*/
/* Starting position */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
@-webkit-keyframes example1 {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%);
/* Firefox bug fix */
-webkit-transform: translateX(100%);
/* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
/* Firefox bug fix */
-webkit-transform: translateX(-100%);
/* Firefox bug fix */
transform: translateX(-100%);
}
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "marquee-div" class = "scroller">
<span id = "marquee-text"></span>
</div>
Ответы 3
Если вам нужна действительно круглая область без очистки экрана до того, как снова появится первый бит текста, вам придется дважды скопировать слой div, чтобы второй появился сразу после окончания первого (в противном случае вы получите разрыв между текст начинается снова, проверьте это для простого примера:
<div class = "marquee">
<div>
<span>You spin me right round, baby. Like a record, baby.</span>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>
и CSS:
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
(взято из примера выделения https://codepen.io/jamesbarnett/pen/kfmKa[прокрутка css][1]
Вы можете использовать старомодное выделение:
<marquee behavior = "scroll" direction = "left" scrollamount = "80" scrolldelay = "1000">
<span id = "marquee-text"></span>
</marquee>Хотя это старый html, но он отлично работает во всех браузерах.
var text = 'Symbol: BABA Open: 168.71 Latest: 166.15 Change: -2.23 Symbol: PEP Open: 115.87 Latest: 115.91 Change: 3.32 Symbol: AAPL Open: 171.47 Latest: 170.42 Change: -0.38 Symbol: AMZN Open: 1627.86 Latest: 1607.95 Change: -14.7 Symbol: FB Open: 164.7 Latest: 162.5 Change: -1.45 Symbol: NFLX Open: 359 Latest: 356.87 Change: -2.2 Symbol: USO Open: 11.61 Latest: 11.71 Change: 0.23 Symbol: NKE Open: 85.56 Latest: 85.38 Change: 0.7 Symbol: YUM Open: 94.69 Latest: 94.12 Change: 0.27 Symbol: LEE Open: 2.64 Latest: 2.61 Change: -0.02';
//text is cutoff at width of parent container
$("#marquee-text").text(text);.scroller {
height: 20px;
overflow: hidden;
position: relative;
}
.scroller p, .scroller span {
/*font-size: 3em;*/
white-space: nowrap;
color: black;
position: absolute;
width: 100%;
/*height: 100%;*/
margin: 0;
/*line-height: 50px;*/
/*text-align: center;*/
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 20s linear infinite;
-webkit-animation: example1 20s linear infinite;
animation: example1 20s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<marquee behavior = "scroll" direction = "left" scrollamount = "80" scrolldelay = "1000">
<span id = "marquee-text"></span>
</marquee>Я не могу с чистой совестью использовать элемент, который устарел и может потерять поддержку браузера, когда они соберутся его удалить. w3.org/TR/2010/WD-html5-20100304/…
хорошо, попробуй это, хотя время ожидания какое-то время jsfiddle.net/pqrs0v9a/2
Спасибо! Любые идеи о том, как сократить «задержку перед появлением»? Я возился с начальными значениями translateX, и это, похоже, мало помогает. Я знаю, что это связано с первоначальной шириной div, но я не могу заставить его появиться, как только данные будут установлены.
Я уменьшил время загрузки с 50 с до 29 с jsfiddle.net/v7cu2zme/1
Я обнаружил проблему с усечением данных в родительском контейнере и не могу поверить, что пропустил:
.scroller p, .scroller span {
...
width: 100%; /* <== THIS */
...
}
Я собираюсь вернуться и поработать с предложением «200%» по другой половине проблемы, но основная проблема решена.
Спасибо всем за то, что вы всегда были потрясающей декой!
Аккуратный трюк, но он действительно требует, чтобы я заранее знал размер текста, чтобы можно было выровнять проценты. Пример на CodePen прерывается из-за большого размера текста в исходном сообщении. Я собираюсь держать это в заднем кармане, потому что это было бы полезно, когда известен размер данных.