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>Then create a html file and add the following HTML code to the body section of your html file.
<script type="http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
HTML:
<div class="marquee">After creating HTML file we need to style the marquee as bellow.
<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>
CSS:
.marquee {Now add the following js script on your html header section with document ready function.
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 100%;
overflow: hidden;
padding: 10px 0px;
}
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.
What if we want continuous Marquee in vertical layout with images moving from bottom to top?
ReplyDeleteits not continues, based on the width, it breaks.
ReplyDeleteplease see the fiddle. it is continues.
Deletehttps://jsfiddle.net/vjeq3c2y/3
Do fix this though:
ReplyDeletescript 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"
Hello here is the latest fiddle link please see it.
Deletehttps://jsfiddle.net/engrmahabub/vjeq3c2y/
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.
ReplyDeleteMobile application development company in Qatar
chatbot development companies in Qatar
Artificial Intelligence services in Qatar
hi this is breaking based on content size / width. It's creating a jump / stumble for each repeated/duplicate content.
ReplyDeleteOffice 365 email signature software
ReplyDeleteSigsync 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.