Sun. Nov 17th, 2019

Codes

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.

HTML:


<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>
</div>

Jquery Library:


<script src="http://codes.tipsfusion.com/demos/jquery/jquery-marquee/jquery.min.js" type="text/javascript"></script>
<script src="http://codes.tipsfusion.com/demos/jquery/jquery-marquee/animate.js?v=4"type="text/javascript"></script>

At this at top of the page.

jQuery:


<script>
$(function(){
var $mwo = $('.marquee-with-options');
$('.marquee').marquee();
$('.marquee-with-options').marquee({
//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 https://github.com/tobia/Pause
pauseOnHover: true
});
//Direction upward
$('.marquee-vert').marquee({
direction: 'up',
speed: 1500
});
//pause and resume links
$('.pause').click(function(e){
e.preventDefault();
$mwo.trigger('pause');
});
$('.resume').click(function(e){
e.preventDefault();
$mwo.trigger('resume');
});
//toggle
$('.toggle').hover(function(e){
$mwo.trigger('pause');
},function(){
$mwo.trigger('resume');
})
.click(function(e){
e.preventDefault();
})
});
</script>

Add some CSS:


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

 

Download CodeDemo image

Leave a Reply

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