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

Question

[gsdev99]

Всем привет. Недавно на сайте увидел следующий эффект с "плавающим зацикленным текстом"
https://dolinger-web.ru/
Посмотрев в DevTools, я увидел, что использовался слайдер:
https://kenwheeler.github.io/slick/
Могли бы вы поделиться своими мыслями как этот эффект был реализован?

Answer 1

[RAX7]

Это можно сделать и без всяких слайдеров

Comments

[gsdev99]

Спасибо.

[Kombik]

Спасибо

Answer 2

[profesor08]

Эффект интересный, но реализация просто мерзкая, так еще и кривая.

Для создания такого эффекта тебе потребуется несколько svg картинок, которые будут представлять собой всю полосу надписей. 4 полоски - 4 картинки, у каждой svg картинки текстовые элементы расположены в ряд. Далее задаешь эти картинки как фон для блоков: background: url(img1.svg) repeat-x;. Остается только задать бесконечную анимацию смещения фона в нужную сторону на @keyframes. Все.

Пример:

Comments

[gsdev99]

Спасибо.

Answer 3

[Дмитрий]

Все очень просто
Пример

Comments

[Максим]

классно ...

[gsdev99]

Спасибо.