Continuous Marquee with jQuery

Mahabubur Rahman
8



Sometime we need to use continuous marquee. But the traditional marquee not continuous. It's slide from one to another side as below.

jQuery marquee is the best marquee plugin in the world jQuery marquee is the best marquee plugin in the world

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. 

Post a Comment

8Comments
  1. What if we want continuous Marquee in vertical layout with images moving from bottom to top?

    ReplyDelete
  2. its not continues, based on the width, it breaks.

    ReplyDelete
    Replies
    1. please see the fiddle. it is continues.
      https://jsfiddle.net/vjeq3c2y/3

      Delete
  3. Do fix this though:
    script type="http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"
    Should be script src="http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"

    ReplyDelete
    Replies
    1. Hello here is the latest fiddle link please see it.
      https://jsfiddle.net/engrmahabub/vjeq3c2y/

      Delete
  4. This is a nice post in an interesting line of content. Thanks for sharing this article, a great way of bringing this topic to discussion.
    Mobile application development company in Qatar
    chatbot development companies in Qatar
    Artificial Intelligence services in Qatar

    ReplyDelete
  5. hi this is breaking based on content size / width. It's creating a jump / stumble for each repeated/duplicate content.

    ReplyDelete
  6. Office 365 email signature software
    Sigsync Office 365 email signature provides centralized email signature management and design tools. With centralized email signature management, you can centrally manage the signatures of the entire organization. It is simple to use as it provides various options/templates. You can use the signature generator by the drag and drop function to suityour requirements.
    Companies or businesses use an email signature to enhance their brand, promote marketing activities and to establish a corporate identity. This makes it easy for people to reach out to you and to know more about your business
    Use the signature generator to create a signature across all email clients and devices using various available templates. Setting the rules and generating the signature for Office 365 using Sigsync is a straightforward approach without much technical knowledge.

    ReplyDelete
Post a Comment