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.