MarqueeKit | Smooth Image Marquees for Modern Web

Introduction

MarqueeKit makes it easy to add smooth, performant image marquees to your web projects. In this guide, we'll walk through the basic setup and implementation using HTML and JavaScript.

Viewing The Demo (2 minutes)

If you already know how to open a live server for HTML/CSS/JS:

Click on index.html.
Open the live server.

If you don't yet know:

Opening a Live Server

We'll be using my favorite VS Code Extension of all time: Live Server. Here's how we do it:

Click the Extensions tab on the left side of VS Code.
Search for Live Server.
Click the Install button.
Restart VS Code (Shift + Cmd + P → type: Developer: Reload Window).
Open the index.html file.
Click Go Live (located in the lower right with a little radiowave icon).
This should open the demo in your preferred browser, and the image marquees should be visible and working.

Feel free to look up other tutorials online for support with other IDEs like Sublime, Atom, WebStorm, and more. This can be frustrating if you're new to this and your IDE doesn't have a simple solution. If it's giving you troubles, you can skip this part or reach out to us for support, and we'll help within 24 hours.

Full Setup Instructions (5 minutes)

1. Copy these two files into your project:

marquee.js goes into your scripts folder.
marquee.css goes into your styles folder.

2. Copy the image folder into your project

Copy the images folder into your project’s root directory. This folder contains placeholder images at the moment. To make the marquee yours, you can add your own images.

Example directory structure after adding the images folder:

<!-- This is an example; your file structure
will look unique, but should contain the newly
added files and folders -->

├── css
│   ├── shop.css
│   ├── checkout.css
│   ├── marquee.css
│   └── contact.css
├── html
│   ├── gallery.html
│   ├── shop.html
│   ├── checkout.html
│   ├── confirmation.html
│   ├── about.html
│   └── contact.html
├── images
│   ├── image1.webp
│   ├── image2.webp
│   ├── image3.webp
│   ├── image4.webp
│   └── logo.png
├── js
│   └── marquee.js
└── index.html

<!-- Note: There's nothing requiring the images to be in the images folder except for the path in the HTML declaration. So you can move the images around as long as you adjust the paths to the images in the HTML. -->

3. Add this HTML:

Add this line into the <head> of your chosen .html file:

<!-- Make sure to adapt this path to your file structure -->
<link rel="stylesheet" href="/styles/marquee.css">

Add this <section> into the <body> of your chosen .html file:

<div class="marquee-wrapper">
  <h1>MarqueeKit Examples</h1>  
  <section class="image-marquee">
    <h2>Basic Marquee</h2>
    <div id="image-marquee"></div>
  </section>
</div>

Add these tags right before closing the </body> tag:

<script src="/scripts/marquee.js"></script> <!-- Adapt this too -->

<script>
  new MarqueeKit("#image-marquee", { // This ID needs to match the div's ID
    images: [
      "/images/image1.webp", // Add your own images
      "/images/image2.webp",
      "/images/image3.webp",
      "/images/image4.webp"
    ],
    imageWidth: 250, // Experiment with changing all of these and have fun 🕺
    height: 200,  
    speed: 50,
    gap: 20,
    reverse: false,
    pauseOnHover: false,
    imageScale: 1, // Try 1.05
    borderRadius: 8,
  });
</script>

I know that I sound like a broken record, but for the love of all that is sacred, make sure that all the paths are correct.

4. Start a Live Server (see instructions above if needed)

5. Remove body styling from `marquee.css` if interfering with your site's existing styles

/* REMOVE FROM HERE 
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  padding: 20px 0px;
  background-color: #ffffff;
  background-image: 
    linear-gradient(rgba(3, 3, 3, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 8, 8, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  min-height: 100vh;
}
/* TO HERE */

/* Rest of the CSS rules 

@media (prefers-color-scheme: dark) {

/* AND FROM HERE 
body {
  background-color: #0a0a0a;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  color: #e1e1e1;
}
/* TO HERE 

/* Rest of the CSS rules 

}

That's it! Your marquee should be working now. Don't hesitate to email us at marqueekit1@gmail.com for support if anything's not working.

Customization Options

Now the fun bit. You can make your marquee unique by adding any of these options:

new MarqueeKit("#my-marquee", {
  images: [ // Use at least 2 images
    "/images/image1.jpg", 
    "/images/image2.jpg",
    "/images/image3.jpg"
  ],
  // Optional
  imageWidth: 250,          // Sets the width of each image in pixels
  height: 200,              // Sets the marquee's height in pixels
  speed: 50,                // Sets scroll speed (higher = faster)
  gap: 20,                  // Creates space between each image (in pixels)
  reverse: false,           // Reverses the direction of the marquee (true = scroll right)
  pauseOnHover: true,       // Adds a smooth pause on hover effect
  imageScale: 1.05,         // Makes each image grow on hover (try 1.08, 1.1, 1.5, 2, etc.)
  borderRadius: 10          // Adjusts how rounded the corners of each image are
});

/* To add an on-load animation, add this to your head 
<link rel="stylesheet" href="/css/animate.css">
/* Make sure to add it below the marquee.css import

Previewing `.md` Files

If you've never viewed a .md file, you can do that with extensions like Markdown Preview Github Styling or Markdown Preview Enhanced in the VS Code ecosystem. You can also view it through the command palette:

Open the .md file.
Press Shift + Ctrl/Cmd + P.
Search: Markdown: Open Preview.
Press Enter.

Need More Help?

Check out index.html for a working example, or email us at marqueekit1@gmail.com.

Pricing Information

MarqueeKit offers advanced features and premium support through our paid plans. To learn more about our pricing, please visit marqueekit.com/pricing.

Getting Started with MarqueeKit