Customizable marquee effect with jQuery and CSS3: 3 Demos
The marquee effect with CSS3
The Css3Marquee plug-in uses the jQuery and CSS3 for creating the marquee effect as an alternative to the HTML marquee which is not smooth in all browsers.
You may customize the speed and direction of marquee effect by using the data attribute or jQuery code.
Demo1 Demo2 Demo3
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:
|
1 2 3 4 5 |
<div> <p class="demo-righttoleft">A Demo of right to left marquee</p> </div> |
The class of paragraph is referred in the jQueyr code for initiating the plug-in:
$(‘.demo-righttoleft’).Css3Marquee();
The next section shows the demo and you may get the complete code from the example pages.
A demo of right to left marquee
For this demo, the default options are used for marquee; the direction is right to left and speed is 10. Have a look:
See online demo and code
The code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<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='http://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> |
A top to bottom marquee with slow speed
For creating 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:
See online demo and code
The code:
|
1 2 3 4 5 6 7 |
$('.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:
See online demo and code
The markup:
|
1 2 3 4 5 6 7 8 9 |
<div> <p class="demo-top-bottom" data-direction='right' data-speed=5>A Demo of left to right marquee<br /> </p> </div> |
See the complete code on the demo page.
Similarly, you may create marquee from bottom to top by using the top value.