Smoothly Scroll The Content Left Or Right - jQuery SnackMarquee

Smoothly Scroll The Content Left Or Right - jQuery SnackMarquee
File Size: 7.36 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

SnackMarquee is a dead simple text marquee plugin which smoothly scrolls text content left or right in a fixed height container. Great for breaking news, Stock Quotes, Exchange Rates, etc.

How to use it:

1. Reference the necessary JavaScript and CSS files in your project:

<link href="snackmarquee.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.0.min.js" 
        integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" 
        crossorigin="anonymous">
</script>
<script src="snackmarquee.js"></script>

2. Create a container in which you want to place the text marquee.

<div class="slider"></div>

3. Initialize the plugin and define an array of text to display in the marquee.

const slider = new SnackMarquee({
      selector: '.slider',
      children: [
        'Text 1',
        'Text 2',
        'Text 3'
      ]
});

4. Start the text marquee.

slider.start();

5. Stop the text marquee.

slider.stop();

6. Customize the appearance of the text marquee.

const slider = new SnackMarquee({

      // or 'left'
      mode: 'right',

      // animation speed
      speed: 100,

      // space between text
      space: 20,

      // font family
      font: 'Arial, Helvetica, sans-serif',

      // font size
      size: 24,

      // text color
      color: 'white',

      // background color
      background: 'black',

      // width/height
      width: 0,
      height: 0
      
});

7. You can also override the default settings by using the following methods:

// set mode to 'left'
slider.mode='left'

// set mode to right
slider.mode='right'

// set animation speed
slider.speed=50

// set text color
slider.color='yellow'

// set background color
slider.background='grey'

// set size
slider.width=320
slider.width=640

// delete text
slider.delete(1)

// insert new text
slider.insert(1, 'Quisque elementum diam nisi, eget sollicitudin ex rutrum at.')

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