Как сделать бегущую строку с изменение цвета?

Question

[ParaBellum577]

Всем привет!
Подскажите, как можно реализовать вот такую бегущую строку, но с нюансом, нужно чтобы, когда текст окажется в середине, он менял свой цвет с белого на золотой. Есть идеи?


Просто бегущая строка, я думаю без вопросов сделается что-то в этом духе

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

    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

Но вот с цветом не пойму что делать...

Comments

[Антон Литвиненко]

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

[ParaBellum577]

Rubix,

<marquee
          behavior="scroll"
          weight="150"
          loop="infinity"
          truespeed="300"
          scrolldelay="10"
        >
          The last guard The last guard The last guard
        </marquee>

Либо так

.mainHeader {
    width: 100%;
    height: 154px;
    background-image: url(../../styles/img/civilizations/main_header_back.png);
    background-position: center;
    background-size: cover;
    position: relative;
    > div {
      animation: marquee 10s infinite linear;
      width: 300%;
      height: 100%;
      position: absolute;
      > span {
        // right: 30%;
        width: 33%;
        margin-right: 60px;
        font-family: 'Syne';
        font-style: normal;
        font-weight: 600;
        font-size: 96px;
        line-height: 144px;
        color: #EFDAA9;
       }
    }
  }
 @keyframes marquee{
  0%{transform: translate(0, 0);}
  100%{transform: translate(-100%, 0)}
  }

<div className={styles.mainHeader}>
        <div>
          <span>The last guard</span>
          <span>The last guard</span>
          <span>The last guard</span>
        </div>
        <img src={border} alt="border" />
      </div>

[inkShio]

Я надеюсь ты читал про тег < marquee >

Вышла из употребления: Эта возможность вышла из употребления. Хотя она может продолжать работать в некоторых браузерах, её использование не рекомендуется, поскольку она может быть удалена в любое время. Старайтесь избегать её использования.

[ParaBellum577]

Спасибо, но вопрос не об этом

Answer 1

[Максим К]

Я может глупость скажу, может это гифка???