Sun. Nov 17th, 2019


Codes for Coders

jQuery Marquee with CSS3 Support

1 min read
jquery marquee

jquery marquee

jQuery plugin to scroll the text like the old traditional marquee. NOW with CSS3 support.


<div class='marquee-with-options'>
<p><a href="#" target="_blank">Paragraph 1</a></p>
<p><a href="#" target="_blank">Paragraph 2</a></p>
<p><a href="#" target="_blank">Paragraph 3</a></p>
<p><a href="#" target="_blank">Paragraph 4</a></p>
<p><a href="#" target="_blank">Paragraph 5</a></p>
<p><a href="#" target="_blank">Paragraph 6</a></p>

Jquery Library:

<script src="" type="text/javascript"></script>
<script src=""type="text/javascript"></script>

At this at top of the page.


var $mwo = $('.marquee-with-options');
//speed in milliseconds of the marquee
speed: 7000,
//gap in pixels between the tickers
gap: 5,
//gap in pixels between the tickers
delayBeforeStart: 0,
//'left' or 'right'
direction: 'up',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true,
//on hover pause the marquee - using jQuery plugin
pauseOnHover: true
//Direction upward
direction: 'up',
speed: 1500
//pause and resume links

Add some CSS:

<style type="text/css">
.marquee, .marquee-with-options, .marquee-vert-before, .marquee-vert {
width: 300px;
overflow: hidden;
border: 1px solid #ccc;


Download CodeDemo image

Leave a Reply

Your email address will not be published. Required fields are marked *