Infinite Marquee with Stop on Hover

An attributes-only solution to build an accessible component

How it works

step #1
Copy the Infinite Marquee style and <script> and paste them into the <head> of your page

<link href="https://cdn.jsdelivr.net/gh/francesco-castronuovo/infinite-marquee@1.4.0/style.min.css" rel="stylesheet" type="text/css">
<script async src="https://cdn.jsdelivr.net/gh/francesco-castronuovo/infinite-marquee@1.4.0/script.js"></script>
Copy Script
step #2
Implement in Webflow
Apply the attributes to the elements inside the page
Below is a list of elements and options to create the infinite marquee functionality.
component
I want this
Div Block
to get the infinite marquee functionality.
Add this attribute
Name
fc-marquee

Value
component

Description
Defines the infinite marquee component instance. It has to be applied to a Div Block wrapping the entire marquee content.
wrapper
I want this
Div Block
to be the building block of the marquee component.
Add this attribute
Name
fc-marquee

Value
wrapper

Description
Defines the Div Block representing the building block of the marquee component.
It has to be a child of the "component", and it represents the element that will be automatically duplicated to create the actual marquee.
For example, this attribute could be applied to a Collection List Wrapper that is a direct child of the "component".
Option
Duration
I want to set the duration of a single loop of the infinite marquee animation. Default value is 120 seconds.
Add this attribute
Name
fc-marquee-duration

Value
120

Description
Use this attribute to specify the duration of a single loop of the infinite marquee animation.
The value is expressed in seconds.
Where?
This attribute should be applied to the "component" element.
Option
direction
I want the infinite marquee to be horizontal (reversed) or vertical (reversed). Default value is 'horizontal'.
Add this attribute
Name
fc-marquee-direction

Value
horizontal, vertical, horizontal-reversed, vertical-reversed

Description
Use this attribute to specify if the layout of the infinite marquee is horizontal or vertical.
This attribute will be used to set the direction of the animation.
Where?
This attribute should be applied to the "component" element.