Sometime we need to use continuous marquee. But the traditional marquee not continuous. It's slide from one to another side as below.
Here we see after completing fully then start from first. But wee need continuous slid, and there will no gap from last of marquee to first of marquee.
Today I will discus on how we create marquee with continuous looping without gap from end to start. Lets start.
We need two external JavaScript library for this topics. First of all load following two js library.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type="http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>Then create a html file and add the following HTML code to the body section of your html file.
HTML:
<div class="marquee">
<span style="color:red;">jQuery marquee is the best marquee plugin in the world jQuery marquee is the best marquee plugin in the world </span> *
<span style="color:blue;">jQuery marquee is the best marquee plugin in the world jQuery marquee is the best marquee plugin in the world </span> *
<span>jQuery marquee is the best marquee plugin in the world jQuery marquee is the best marquee plugin in the world </span> *
</div>After creating HTML file we need to style the marquee as bellow.
CSS:
.marquee {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 100%;
overflow: hidden;
padding: 10px 0px;
}Now add the following js script on your html header section with document ready function.
JS:
$('.marquee').marquee({
//speed in milliseconds of the marquee
duration: 5000,
//gap in pixels between the tickers
gap: 10,
//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 continuous flow
duplicated: true
});Now see what happened the marquee has no gap from end to start of marquee section. Lets enjoy it.