The Css3Marquee plug-in uses jQuery and CSS3 for creating the marquee effect as an alternative to the HTML marquee which is not smooth in all browsers.
Developer’s page Download plug-in
Setting up the Css3Marquee plug-in?
After downloading the plug-in, include the JS file of the plug-in above the </body> tag (below jQuery library).
<script src=’http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js’></script>
<script type=”text/javascript” src=”js/marquee/marquee.js”></script>
The markup can be a simple or any container to be used for marquee effect, for example:
<div> <p class="demo-righttoleft">A Demo of right to left marquee</p> </div>
The class of paragraph is referred to in the jQuery code for initiating the plug-in:
The next section shows the demo and you may get the complete code below (after the demo gifs).
A demo of right to left marquee
For this demo, the default options are used for the marquee; the direction is right to left and the speed is 10. Have a look:
The code:
<!DOCTYPE html>
<html>
<head>
<style>
.Css3Marquee-demo {
position: relative;
width: 490px;
height:300px;
cursor: pointer;
background: #499494;
margin: 0 auto;
margin-top: 15px;
font-size:20px;
text-align: center;
padding: 20px 0;
color:#fff;
box-shadow: 10px 20px 20px 3px #42AE42;
}
</style>
</head>
<body>
<div class="Css3Marquee-demo">
<h2> CSS3 Marquee</h2>
<div>
<p class="demo-righttoleft">A Demo of right to left marquee</p>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script type="text/javascript" src="js/marquee/marquee.js"></script>
<script>
$('.demo-righttoleft').Css3Marquee();
</script>
</body>
</html>
A top-to-bottom marquee with slow speed
To create the top-to-the-bottom marquee, use the bottom value in jQuery or data attribute.
For this demo, I set the direction in jQuery code. The lower the number, the slower will be marquee. In this example, the speed is set as 2:
just use this jQuery code in above the above demo:
$('.demo-top-bottom').Css3Marquee({
direction:'bottom',
speed: 2
});
A left-to-right example with data attributes
In the following example, the direction is set as right while the speed is 5. Both these options are set by using the data attributes:
- data-direction=’right’
- data-speed=5
While the jQuery code just initiates the plug-in:
Complete code:
<!DOCTYPE html>
<html>
<head>
<style>
.Css3Marquee-demo {
position: relative;
width: 490px;
height:300px;
cursor: pointer;
background: #499494;
margin: 0 auto;
margin-top: 15px;
font-size:20px;
text-align: center;
padding: 20px 0;
color:#fff;
box-shadow: 10px 20px 20px 3px #42AE42;
}
</style>
</head>
<body>
<div class="Css3Marquee-demo">
<h2> CSS3 Marquee</h2>
<div>
<p class="demo-top-bottom" data-direction='right' data-speed=5>A Demo of left to right marquee<br />
</p>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script type="text/javascript" src="js/marquee/marquee.js"></script>
<script>
$('.demo-top-bottom').Css3Marquee({
});
</script>
</body>
</html>
Similarly, you may create a marquee from bottom to top by using the “top” value.