jQuery Plugin For Scrolling Text - oyomarquee.js

oyomarquee.js is a lightweight yet customizable jQuery plugin for creating scrolling text programmatically using CSS3 animations.

It allows you to scroll the text horizontally or vertically like a carousel or a traditional marquee.

How to use it:

1. Load the main script oyomarquee.js after jQuery (slim build is recommended).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/oyomarquee.js"></script>

2. Create a new instance of the oyoMarquee and pass the following parameters:

• marqueeWidth: Container width
• marqueeHeight: Container height
• marquee: Border radius
• textDirection: 'left' (default), 'right', 'top', or 'down'

// oyoMarquee(marqueeWidth, marqueeHeight, marqueeBorderRadius, textDirection)
const myMarquee = new oyoMarquee(700, 50, 25);

3. Set the text to scroll through using the setText method. That's it.

myMarquee.setText("Any Text Here");

4. Apply your own styles to the marquee container.

.oyomarquee {
  border: 1px solid white;
  margin: auto;
  padding: 16px;
  font-size: 25px;
}

5. Or change the styles directly in JavaScript.

myMarquee.changeBackgroundColor("black");
myMarquee.changeTextColor("red");

6. Set the number of times the scroll animation should be played before stopping. Default: 'infinity'.

myMarquee.loop = 2;

7. Config the scroll animation.

// animation speed
// default 1
myMarquee.speed = 2;

// animation delay
// default 0
myMarquee.delay = 1;

8. Determine whether to play the scroll animation on page load. Default: true.

myMarquee.scroll = false;

9. Determine whether to collapse sequences of white space. Default: false.

myMarquee.wrap = false;

10. Set the direction of the scroll animation.

myMarquee.direction = "right"

Changelog:

2022-02-26

• JS update

---

This awesome jQuery plugin is developed by oyosoftware. For more Advanced Usages, please check the demo page or visit the official website.