Dynamic Horizontal Scroller Plugin - jQuery hMarquee.js

hMarquee.js is a fully configurable, jQuery/Zepto based scroller plugin which automatically and horizontally scroll through an array of strings (or JS objects) similar to the abandoned marquee tag.

Installation:

# NPM
$ npm install hmarquee --save

How to use it:

1. Download and load the minified verion of the jQuery hMarquee.js script after jQuery or Zepto library.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="hMarquee.min.js"></script>

2. Define your own strings or objects to be presented in the scroller.

var listStr = ['This is one.', 'This is two.', 'This is three', 'This is four.', 'This is five', 'This is six.', 'This is seven.', 'This is eight.', 'This is nine.', 'This is ten.'];

var listObj = [
  { content: 'This is one.', link: '#1' },
  { content: 'This is two.', link: '#2' },
  { content: 'This is three.', link: '#3' },
  { content: 'This is four.', link: '#4' },
  { content: 'This is five.', link: '#5' },
  { content: 'This is six.', link: '#6' },
  { content: 'This is seven.', link: '#7' },
  { content: 'This is eight.', link: '#8' },
  { content: 'This is nine.', link: '#9' },
  { content: 'This is ten.', link: '#10' }
];

3. Call the function on the target container where you want to display the scroller. That's it.

<div class="demo"></div>

$.hMarquee.marquee({
  el: $('.demo'),
  externalClass: 'marquee',
  list: listStr
});

4. More plugin options to customize the scroller.

$.hMarquee.marquee({

  // delay in milliseconds
  delayBeforeStart: 0,

  // in pixels
  speedPeerSec: 70,

  // min amount of strings to start the scroller
  minShowCount: 3,

  // enables fade effects
  fadeInOut: false,

  // is always scroll?
  alwaysScroll: false,

  // start the scroller on init
  startVisibility: true,

  // left/right items
  leftItem: false,
  rightItem: false,

  // key-value pairs for list
  linkTextField: 'text',
  linkUrlField: 'url'
  
});

5. To create a notification style scroller that scrolls only one message at a time.

var noticeTextLong = 'This is a loooooooooooooooooooooooooooooooooooooooooooooooooong string.';

<div class="noti-demo"></div>

$.hMarquee.notification({
  el: $('.noti-demo'),
  externalClass: 'marquee',
  noticeText: noticeTextLong,
  onclick: function () {
    alert('Clicked');
  }
});

// or only once
$.hMarquee.notificationOnce({
  el: $('.noti-demo'),
  externalClass: 'marquee',
  noticeText: noticeTextLong,
  onclick: function () {
    alert('Clicked');
  }
});

6. Show/hide the scroller manually.

// show
$.hMarquee.show(instance);

// hide
$.hMarquee.hide(instance);

---

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