Welcome to newmarquee.com. To get started using New Marquee on your website, click here.

A New Marquee for The Web

New Marquee is a small library made with JavaScript and CSS that allows you to use marquee-like functionality without using the deprecated <marquee> tag.

Installation

You can use this library, as well as the alternate library that doesn't use the Shadow DOM, by linking one of the CDNs in your HTML and using the code provided:

Using The <new-marquee> Shadow DOM Element

This is the primary way to use New Marquee. Just copy the CDN and the code below.

New Marquee CDN


<script src="https://cdn.jsdelivr.net/gh/Sean-93/newmarquee@v0.9.1/dist/newmarquee-min.js"></script>

New Marquee Code


<new-marquee speed="40" direction="left" pauseonhover="true">
  <div style="display: flex; align-items: center;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Magni repellat nemo nesciunt rerum asperiores assumenda ex quos dignissimos.</p>
  </div>
</new-marquee>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Magni repellat nemo nesciunt rerum asperiores assumenda ex quos dignissimos.

Go back to Installation^


Without Using The Shadow DOM Element

This is the alternate way to use New Marquee, without the Shadow Dom Element. Copy the CDN and the code below.

New Marquee CDN (No Shadow DOM)


<script src="https://cdn.jsdelivr.net/gh/Sean-93/newmarquee@v0.9.1/dist/no-shadow-dom-min.js"></script>

New Marquee CSS (No Shadow DOM)


.newmarquee-container {
display: block;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
width: 100%;
height: 100%;
}

#newmarquee-content {
white-space: nowrap;
will-change: transform;
display: inline-block;
}

New Marquee HTML (No Shadow DOM)


<section class="newmarquee-container" data-direction="left" data-speed="50" data-pauseonhover="true" >
  <div id="newmarquee-content" style="display: flex; align-items: center;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Magni repellat nemo nesciunt rerum asperiores assumenda ex quos dignissimos.</p>
  </div>
</section>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Magni repellat nemo nesciunt rerum asperiores assumenda ex quos dignissimos.


Go back to Installation^


Attributes

New Marquee has four different custom attributes that control the functionality:

Repo/Source Code

Here is the link to the GitHub repository and source code:

https://github.com/Sean-93/newmarquee

Find this library helpful or fun?
☕️ Buy me a coffee