Simple Marquee – Horizontal Text Scrolling with jQuery

An easy jQuery solution for horizontal text scrolling that can be used as a news ticker.

This is a simple jQuery plugin which will help you create a list of items that scroll from right to left. It is similar to the ordinary marquee tag but there are options for speed, some additional classes and it is paused on hover.

Image may be NSFW.
Clik here to view.

Simple Marquee is a lightweight and straightforward solution for adding text scroll widget or a news ticker for a web page.

Have a look to see how you can use it. Download this plugin and check out the demo below.

#1 – Load the jQuery library and the marquee plugin in your document.

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

#2 – The HTML

<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>    
</ul>  </div></div>

#3 – The CSS

.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;} .marquee,*[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 (){
createMarquee();
});

#5 – Customize Simple Marquee

$(function (){

createMarquee({
  
  // 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
  marquee_class:'.example-marquee', 

  // 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

});

});

DEMO Download Simple Marquee

Check out the project on Github.