New Marquee is a small JavaScript library that allows you to use marquee-like functionality without using the deprecated marquee tag.

• Marquee Functionality: New Marquee allows you to have the same or better functionality than using the deprecated marquee tag
• Seamless Animation: The content emerges from one side of the screen, scrolls away, and then once it has completely scrolled away, the content seamlessly re-emerges from the other side
• Adjustable Speed: Allows for variable speed
• Four Directions: Supports four directions - up, down, left, and right
• Pause on Hover: Optional pause of marquee scrolling animation when hovering over the New Marquee content - resumes when no longer hovering

• The primary way to use this is with the custom Shadow-DOM <new-marquee> component provided, but there is also an alternate version where you can assign the 'newmarquee-content' ID to any HTML element that is the child of an element that has 'newmarquee-container' as a CSS class.

With CDN:
<script src="proxy.php?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FSean-93%2Fnewmarquee%40v0.9.1%2Fdist%2Fnewmarquee-min.js"></script>
Use Locally Without CDN:
https://github.com/Sean-93/newmarquee/blob/main/src/newmarquee.js

<new-marquee speed="50" 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>

• Make sure to include this CSS if you are not using the Shadow-DOM 'newmarquee' element:

      .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;
      }
  
  

With CDN:
<script src="proxy.php?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FSean-93%2Fnewmarquee%40v0.9.1%2Fdist%2Fno-shadow-dom-min.js"></script>
Use Locally Without CDN:
https://github.com/Sean-93/newmarquee/blob/main/src/no-shadow-dom.js

<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>

• If the direction attribute is left blank or with an invalid value, New Marquee will default to moving left. The exception is if the HTML Lang attribute on the page is set to a language that primarily reads right to left on digital devices- then, the default will be to move right.

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