Как поменять цвет текста в карусели с одного на другой во время движении?

Question

Есть карусель, который горизонтально перемещается. Слева у него оранжевый, а справа фиолетовый цвет. По факту это градиент с мягким стыком по середине. Как сделать так чтоб это смотрелось как в фигме? Здесь как у меня получилось:

Здесь код:

    .banner {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    background: $black;
    &__overlay{
        position: absolute;
        background: linear-gradient(90deg, rgba(255,105,20, 0.35) 0%, rgba(145,69,253, 0.35) 100%);
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    &__wrapper{
        display: flex;
        align-items: center;
        gap: 78px;
        animation: banner 20s linear infinite;
    }
    &__item {
        color: white;
        font-size: 1.6rem;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
        white-space: nowrap;
    }

}
@keyframes banner {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}

Здесь как это должно выглядеть по правильному:

Answer 1

body{background: black;}
#x {
  background: linear-gradient(to right, hsl(35, 65%, 10%), hsl(280, 65%, 10%));
}

#y {
  background: linear-gradient(to right, hsl(35, 100%, 45%), hsl(280, 100%, 45%));
  background-clip: text;
  color: transparent;
  text-align: center;
}

<div id='x'>
  <h1 id='y'>ну можно сделать например как то вот так вот</h1>
</div>

БЛОГ НА HUSL

Как поменять цвет текста в карусели с одного на другой во время движении?

Ответы (1 шт):