Some examples of how to use the library are shown below.
You can add a gradient to the marquee so that the sides of the marquee are more pleasant to look at.
In this example the following props are used:
[255, 255, 255](light)
[0, 0, 0](dark)
The marquee can pause when you hover over the content. This is useful if you want the ability to run additional actions inside the content. For this example the
pauseOnHover prop is used.
You can also use the right click button to momentarily pause the animation. Hold the right click button to pause the animation. Releasing the mouse button will resume the animation. In this example the
pauseOnClick prop is used.
With this component you can also create a vertical marquee. This is useful if you want to create a vertical scrolling list of items.
You will need to put your marquee inside a parent container with a defined height. You can also use a fixed width if you want to limit the width of the marquee. The marquee component will otherwise take up the full width of the parent container.
clone) and events are supported for vertical marquees. The only difference is that the
verticalprop needs to be set to
This animation is playing.
If your marquee content is too small to take the width of the full container it will leave an empty space.
You can use the
clone prop to workaround this issue. With this option,
vue3-marquee will automatically calculate the content and container widths and clone your content to fill the container completely.