Как реализовать такой анимированный фон?

Question

[Danil Privedentsev]

Коллеги, добрый день!
Подскажите, пожалуйста, как реализовать такой фон, чтобы он был анимирован и двигался справа налево.
Я не хочу это использовать как gif картинку.

Comments

[senator]

Чтобы текст налево двигался?

[Danil Privedentsev]

senator, Да, все верно

[senator]

Danil Privedentsev, можно попробовать через setInterval менять позицию тега с текстом через left свойство

[szQocks]

Danil Privedentsev, ну ты б хотя бы хоть что-то написал бы, хотя бы текст что-ли сверстал на чёрном фоне

[Aetae]

Гуглить css background-position animation в чём вопрос то?

[Danil Privedentsev]

Aetae, szQocks, senator,

Спасибо большое за ответы, но есть еще пара вопросов:
1. Как это лучше реализовать? Картинкой или с помощью текста в теге?
Если использовать второй вариант, как этот текст будет обрабатывать поисковик и повлияет это негативно на SEO?
И еще важно, мне нужно чтобы текст был зациклен, то это тоже с использованием СSS или нужно будет еще что-то дописывать с использование JS?

[senator]

Danil Privedentsev, 1. По моему легче с с текстом в теге. 2. сео незнаю. 3. Можно и на css и на js

[szQocks]

Danil Privedentsev, 1 - лучше через фоны и через css анимацию манипулировать background-position

2 - если картинка установлена через стили, то поисковики о ней на сколько я знаю не узнают

можно и без js

Answer 1

[k3499]

Делаешь контейнер ".scrolling-background".
Через css делаешь анимацию зацикленного движения картинки по горизонтали. Клавное у картинки сделать паттерн, чтобы склейку на краях не было видно

.scrolling-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('your-background-image.jpg') repeat-x;
    animation: scroll 5s linear infinite;  /* Измените 5s на нужную вам скорость прокрутки */
}

@keyframes scroll {
    from {
        background-position: 0;
    }
    to {
        background-position: 100% 0;
    }
}