Сделать на чистом css зацикленую бегущую строку без рывков

Рейтинг: 1Ответов: 1Опубликовано: 03.08.2023

Хочу сделать зацикленный текст, как только первая буква коснется края экрана, сразу же, чтобы появлялся текст с начала экрана , без запинок и т.д. Буду очень благодарен за помощь!

.ticker-inline {
  margin: 0 auto;
  overflow: hidden;
}

.ticker-inline-bottom-trial {
  margin-bottom: 4rem;
}

.tickers {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  /* animation: marquee 5s linear infinite; */
  width: 72.04144rem;
}

.ticker1 {
  position: absolute;
  top: 2px;
  left: -110%;
  animation: marquee1 1s linear infinite;
}

.ticker {
  display: flex;
  font-family: var(--font-first);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  color: #969696;
  justify-content: space-between;
  animation: marquee 10s linear infinite;
  width: 72.04144rem;
  margin: 0 auto;
}

@keyframes marquee {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
<div class="tickers">
  <div class="ticker">
    <h2 class="ticker__head">GENIOUS PEOPLE</h2>
    <h2 class="ticker__head">GENIOUS PEOPLE</h2>
    <h2 class="ticker__head">GENIOUS PEOPLE</h2>
  </div>
</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Можете сделать больше блоков с текстом и перемещать их в начальное положение, когда они наполовину вышли из кадра. Сначала запускается анимация появления текста из левой части экрана, а потом начинает работать бесконечная анимация, которая перемещает блок с текстом назад, когда он наполовину выехал за правую сторону.

.ticker-inline {
  margin: 0 auto;
  overflow: hidden;
}

.ticker-inline-bottom-trial {
  margin-bottom: 4rem;
}

.tickers {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  width: 1310px;
  background: #181818;
  overflow: hidden;
}

.ticker1 {
  position: absolute;
  top: 2px;
  left: -110%;
  animation: marquee1 1s linear infinite;
}

.ticker {
  display: flex;
  font-family: var(--font-first);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  color: #969696;
  animation: startLine 15s linear, marquee 15s linear 15s infinite;
  width: 2630px;
  margin: 0 auto;
}

.ticker__head {
  width: 430px;
  text-align: center;
  margin-left: 10px;
}

@keyframes startLine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}
<div class="tickers">
  <div class="ticker">
    <h2 class="ticker__head">GENIOUS PEOPLE</h2>
    <h2 class="ticker__head">GENIOUS PEOPLE</h2>
    <h2 class="ticker__head">GENIOUS PEOPLE</h2>
    <h2 class="ticker__head">GENIOUS PEOPLE</h2>
    <h2 class="ticker__head">GENIOUS PEOPLE</h2>
    <h2 class="ticker__head">GENIOUS PEOPLE</h2>
  </div>
</div>