This content originally appeared on DEV Community and was authored by Anthony Bobrov
Do you remember your first projects?
My first one was a school website. I was such a newbie trying to use every single HTML tag I discovered.
I still remember adding about ten <marquee> elements on one page - and all surrounded by flashing GIFs. Once, my friend told me, "Normal people can't use your website."
He was right.
But still, marquees and other similar animations are popular nowadays.
There are tons of pure CSS and JS marquee demos across the web. Nevertheless, I'd like to share my own approach to building a custom Marquee using Vevet.js.
Disclaimer:
Vevet.js is a collection of abstract tools for creative front-end development. Marquee is a part of this ecosystem.
Let's code!
Step 1. Install the library:
npm i vevet
Step 2. Write some HTML:
<div id="marquee">Breaking News🔥</div>
Step 3. Copy and paste this JavaScript code:
import { Marquee } from "vevet";
new Marquee({
container: document.getElementById("marquee")
});
And there you have it!
Here's a basic demo:
But that's just the tip of the iceberg. Vevet Marquee contains really useful features. Here are some of them:
Cloning nodes on demand
This feature is enabled by default, but you can easily disable it whenever you like:
Custom speed and gap
It's not just about numbers! The Marquee supports CSS units, so you can use values like gap: "2rem" or speed: "1vw" - it will just work:
Hover pause
No explanation needed:
Responsiveness
There's a handy tool called Responsive that allows you to change marquee properties at specific breakpoints:
Control
There's no use in any utility unless you can control it. The Marquee can be paused or played:
Made draggable:
Or scrollable:
I hope this serves as a nice alternative for some of you.
You can find documentation here
or browse live demos, which might be even more helpful.
This content originally appeared on DEV Community and was authored by Anthony Bobrov
Anthony Bobrov | Sciencx (2025-11-13T08:27:43+00:00) Infinite Marquee with Vevet.js. Retrieved from https://www.scien.cx/2025/11/13/infinite-marquee-with-vevet-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.