Press "Enter" to skip to content

An Easy to Implement Marquee JQuery plugin with Pause on Hover jQuery Plugin

Easy to implement JQuery Marquee plugin with pauses when scrolling support. This plugin makes the list of elements scroll from right to left similar to a traditional marquee, with a few options for additional categories, and pause on scrolling.

Re-Written by: Fabian Valle (www.fabian-valle.com) (www.obliviocompany.com)

How to make use of it:

1. Load jQuery library and the jQuery easy marquee plugin within the doc.

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

2. Create an inventory of things you need to scroll by way of.

<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. Add customized CSS types to the plugin.

.container {
  width: 100%;
  background: rgb(215, 215, 215);
  float: left;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  height: 45px;
  position: relative;
  cursor: pointer;
}

.marquee-sibling {
  padding: 0;
  background: grey;
  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. Pass via the next parameters to overwrite defaults.

$(function (){

createMarquee({

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

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

});

});

jQuery Plugin For Horizontal Text Scrolling, Simple Marquee Plugin/Github

Simple-Marquee-Demo


See Demo And Download

Official Website(conradfeyt): Click Here

This superior jQuery/javascript plugin is developed by conradfeyt. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.