Continuous Marquee with jQuery

Mahabubur Rahman
13



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

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

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here.
    Kindly keep blogging. If anyone wants to become a Front end developer learn from javascript and jquery training in chennai .
    or learn thru Javascript Training in Chennai.
    Nowadays JavaScript has tons of job opportunities on various vertical industry. javascript and jquery training in chennai

    ReplyDelete
  3. 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
  4. 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
  5. 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
  6. Another interesting articles .am amazed i am reading the articles one by one since yesterday night and every time i find a new article grabbing my attention within a post.
    Top Mobile App Development Companies in San Francisco
    Best Mobile App Development Companies in San Francisco
    Top Mobile App Development Companies in Mexico
    Best Mobile App Development Company in Mexico

    ReplyDelete
  7. Great Article android based projects

    Java Training in Chennai Project Center in Chennai Java Training in Chennai projects for cse The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai

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

    ReplyDelete
  9. This blog will help to get more ideas. This is very helpful for Software Testing learners. Thank you
    for sharing this wonderful site. If someone wants to know about Software QA services this is the right
    place for you
    Exchange Migration

    ReplyDelete
  10. 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