Smooth And Customizable Horizontal Scroller – jsmarquee

Category: Animation , Javascript | April 19, 2023
Author:rogervila
Views Total:215 views
Official Page:Go to website
Last Update:April 19, 2023
License:MIT

Preview:

Smooth And Customizable Horizontal Scroller – jsmarquee

Description:

A tiny JavaScript library that allows you to create a smooth and customizable horizontal content scroller for showcasing breaking news, announcements, or promotional content on your website.

How to use it:

1. Add your content to the scroller container.

<div class="my-marquee" id="marquee-demo-2">
  <div>
    <!-- item -->
      <p>Item 1</p>
    <!-- end item -->
    <!-- item -->
      <p>Item 2</p>
    <!-- end item -->
    <!-- item -->
      <p>Item 13</p>
    <!-- end item -->
    ...
  </div>
</div>

2. The required CSS styles for the scroller.

.my-marquee {
  overflow: hidden;
}
.my-marquee > div {
  display: inline-flex;
  position: relative;
}

3. Load the minified version of the jsmarquee library.

<script src="marquee.min.js"></script>

4. Initialize the jsmarquee.

const m = new Marquee({
      element: '#marquee-demo',
})

5. Start the scroller.

m.run();

6. Change the animation speed. Default: 1.

const m = new Marquee({
      element: '#marquee-demo',
      velocity: 3,
})

You Might Be Interested In:


Leave a Reply