Author: | BuddyLReno |
---|---|
Views Total: | 187 views |
Official Page: | Go to website |
Last Update: | May 16, 2023 |
License: | MIT |
Preview:

Description:
Smarquee is a JavaScript plugin that generates a scrolling marquee from any text content using CSS3 @keyframes.
How to use it:
1. Import the smarquee.min.js script into the document.
<script src="smarquee.min.js"></script>
2. Add the id="smarquee"
attribute to the text container.
<h2 id="smarquee"> Your Text Here </h2>
3. Initialize the Smarquee plugin.
const smarquee = new Smarquee({ // options here }); smarquee.init();
4. Config the marquee effect.
const smarquee = new Smarquee({ // selector of text container selector: '#smarquee', // you can select your own element and pass it in here. element: null, // animation speed velocity: 50, // animation options styleOptions: { scrollingTitleMargin: 24, animationName: 'marquee', timingFunction: 'linear', iterationCount: 'infinite', // 'numbers' or 'infinite'. fillMode: 'none', // 'none', 'forwards', 'backwards', or 'both'. playState: 'running', // 'running' or 'paused' delay: '0', pausePercent: 30, }, });
5. Callback functions.
const smarquee = new Smarquee({ onAnimationStart() {}, onAnimationIterate() {}, onAnimationEnd() {}, onAnimationCancel() {}, onClick() {} }); smarquee.init();
6. API methods & props.
smarquee.init(start = true) smarquee.pause() smarquee.play() smarquee.restart() smarquee.deactivate() smarquee.activate() smarquee.updateText(text, delay = 0, start = true) smarquee.updateIterationCount(iterations) smarquee.updateFillMode(fillMode) smarquee.updateDelay(delay) smarquee.updateTimingFunction(timingFunction) smarquee.resetStyleProperties() smarquee.deInit() smarquee.destroy()