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

Всем привет. Недавно на сайте увидел следующий эффект с "плавающим зацикленным текстом"
https://dolinger-web.ru/
Посмотрев в DevTools, я увидел, что использовался слайдер:
https://kenwheeler.github.io/slick/
Могли бы вы поделиться своими мыслями как этот эффект был реализован?
  • Вопрос задан
  • 9083 просмотра
Решения вопроса 3
RAX7
@RAX7
Это можно сделать и без всяких слайдеров
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Эффект интересный, но реализация просто мерзкая, так еще и кривая.

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

Пример:
Ответ написан
@soledar10
html css3 js jquery
Все очень просто
Пример
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы