jQuery Plugin For Horizontal Text Scrolling - Simple Marquee

File Size: 8.02 KB
Views Total: 107250
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Horizontal Text Scrolling - Simple Marquee

A simple jQuery plugin which makes a list of items scroll from right to left similar to the traditional marquee tag, with a few options for speed, additional classes and pause on hover.

Ideal for helping you create a news ticker or text scroller in your webpage / web application.

Basic usage:

1. Load jQuery library and the jQuery simple marquee plugin in the document.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="marquee.js"></script>

2. Create a list of items you want to scroll through.

<div class="container">
  <div class="marquee-sibling"> Breaking News </div>
  <div class="marquee">
    <ul class="marquee-content-items">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>

3. Add custom CSS styles to the plugin.

.container {
  width: 100%;
  background: #4FC2E5;
  float: left;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  height: 45px;
  position: relative;
  cursor: pointer;

.marquee-sibling {
  padding: 0;
  background: #3BB0D6;
  width: 20%;
  height: 45px;
  line-height: 42px;
  font-size: 12px;
  font-weight: normal;
  color: #ffffff;
  text-align: center;
  float: left;
  left: 0;
  z-index: 2000;

*[class^="marquee"] {
  display: inline-block;
  white-space: nowrap;
  position: absolute;

.marquee { margin-left: 25%; }

.marquee-content-items {
  display: inline-block;
  padding: 5px;
  margin: 0;
  height: 45px;
  position: relative;

.marquee-content-items li {
  display: inline-block;
  line-height: 35px;
  color: #fff;

.marquee-content-items li:after {
  content: "|";
  margin: 0 1em;

4. Initialize the plugin.

$(function (){



5. Pass through the following paramaters to overwrite defaults.

$(function (){


  // auto starts on page load
  autostart: true,

  // callback
  onComplete: function(){},
  // controls the speed at which the marquee moves
  duration: 30000, 

  // right margin between consecutive marquees
  padding: 20, 

  // class of the actual div or span that will be used to create the marquee - 
  // multiple marquee items may be created using this item's content. 
  // This item will be removed from the dom

  // the container div in which the marquee content will animate. 
  container_class: '.example-container', 

  // a sibling item to the marqueed item  that affects - 
  // the end point position and available space inside the container. 
  sibling_class: '.example-sibling', 

  // Boolean to indicate whether pause on hover should is required. 
  hover: false,

  // 0-1
  velocity: 0,
  // or right
  direction: 'left'





  • Added direction option


  • Enable autostart option


  • bugfix


  • now more robust and less buggy


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