Очень полезный компонент с анимацией строки с элементами
Расположение компонента
Файлы компонента находятся в папке src/components/effects/marquee, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.
Использование компонента
В HTML воспользуйтесь снипетом mar, или постройте структуру с использованием дата-атрибута data- fls-marquee
<div data-fls-marquee>
<div>елемент один</div>
<div>елемент два</div>
...
</div>Дополнительные возможности
Для корректировки отступов между элементами используйте дата-атрибут data-fls-marquee-space со значением (по умолчанию 30px):
<div data-fls-marquee data-fls-marquee-space="50">
<div>елемент один</div>
<div>елемент два</div>
...
</div>Для корректировки скорости анимации используйте дата-атрибут data-fls-marquee-speed со значением в миллисекундах (по умолчанию 1000ms):
<div data-fls-marquee data-fls-marquee-speed="2000"><div>элемент один</div><div>элемент два</div>...</div>Для остановки анимации при наведении мыши используйте дата-атрибут data-fls-marquee-pause:
<div data-fls-marquee data-fls-marquee-pause>
<div>елемент один</div>
<div>елемент два</div>
...
</div>Для изменения направления движения используйте дата-атрибут data-fls-marquee-direction и значение замка - left, right, top, bottom (значение по умолчанию left)<div data-fls-marquee data-fls-marquee-direction="right"><div>элемент один</div><div>элемент два</div>...</div>При использовании data-fls-marquee-direction ‘top’ или ‘bottom’ у объекта должна быть фиксированная высота и overflow: hidden;