JQuery Marquee

This Fiddle Contains Code to create marquee using JQuery.

by akmiecik

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="marquee">
    <span class="marquee-text">Custom Solutions - Inventory Control - Pipeline Integration - Market Analysis -</span>
    <span class="marquee-text">Custom Solutions - Inventory Control - Pipeline Integration - Market Analysis</span>
</div>
<div class="marquee2">
    <span class="marquee-text">Custom Solutions - Inventory Control - Pipeline Integration - Market Analysis -</span>
    <span class="marquee-text">Custom Solutions - Inventory Control - Pipeline Integration - Market Analysis</span>
</div>
<div class="marquee">
    <span class="marquee-text">Custom Solutions - Inventory Control - Pipeline Integration - Market Analysis -</span>
    <span class="marquee-text">Custom Solutions - Inventory Control - Pipeline Integration - Market Analysis</span>
</div>
<div class="marquee2">
    <span class="marquee-text">Custom Solutions - Inventory Control - Pipeline Integration - Market Analysis -</span>
    <span class="marquee-text">Custom Solutions - Inventory Control - Pipeline Integration - Market Analysis</span>
</div>

CSS

.marquee, .marquee2 {
  width: 100%;
  overflow: hidden;
  color:#000;
  font-size:40px;
  border-top:2px solid #000;
  border-bottom: 2px solid #000;
}
.marquee-text{
    margin-right:5px;
}

JavaScript

$('.marquee').marquee({
//speed in milliseconds of the marquee
    duration: 8000,
    //gap in pixels between the tickers
    //gap: 50,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'right',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true  
});
$('.marquee2').marquee({
//speed in milliseconds of the marquee
    duration: 8000,
    //gap in pixels between the tickers
    //gap: 50,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true  
});