HTML-тикер для длинного текста - PullRequest
Новая
       10

HTML-тикер для длинного текста

0 голосов
/ 08 июля 2019

Я хочу сделать длинный текст, который не помещается в элемент div, чтобы перемещаться слева направо, но максимально возможная часть текста должна отображаться каждый раз.

Markup: 

<div class="marquee" style="width:10px">my long text here/div>

Поведение: 

|my long text|
|y long text |
| long text h|
|long text he|
|ong text her|
|ng text here|

ждать и менять направление 

|ong text her|
|long text he|
| long text h|
|y long text |
|my long text|

повтор бесконечности ...

Мне не удалось добиться этого с помощью развращенных тегов HTML-маркеров, но это должно быть возможно с помощью анимации CSS?

Я не хочу иметь такую ​​ситуацию: 

|           m|

Ответы [ 2 ]

0 голосов
/ 08 июля 2019

Я решил это с помощью переводов css и calc (): 

/* Make it a marquee */
.marquee {
    width:40px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-align: right;
}

.marquee span {
    display: inline-block;
    animation-name: marquee;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: reverse;

}

/* Make it move */
@keyframes marquee {
    0% {
        transform: translateX(0px)
    }


    40%, 60% {
        transform: translateX(calc(40px - 100%))
    }

    100% {
        transform: translateX(0px)
    }
}
<div class="marquee "><span>my long text here</span></div>
0 голосов
/ 08 июля 2019

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

.marquee {
  background-color: #ddd;
  width: 100px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}
.marquee span {
  display: inline-block;
  font-size: 20px;
  position: relative;
  left: 100%;
  animation: marquee 8s linear infinite;
}
.marquee:hover span {
  animation-play-state: paused;
}

.marquee span:nth-child(1) {
  animation-delay: 0s;
}
.marquee span:nth-child(2) {
  animation-delay: 0.8s;
}
.marquee span:nth-child(3) {
  animation-delay: 1.6s;
}
.marquee span:nth-child(4) {
  animation-delay: 2.4s;
}
.marquee span:nth-child(5) {
  animation-delay: 3.2s;
}

@keyframes marquee {
  0%   { left: 100%; }
  100% { left: -100%; }
}
<p class="marquee">
  <span>this is a</span>
  <span>this is a</span>
  <span>this is a</span>
  <span>this is a</span>
</p>
...