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:

 

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:

jQuery marquee

See online demo and code

The code:

 

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:

CSS3 marquee bottom

See online demo and code

The code:

 

 

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:

 

See the complete code on the demo page.

Similarly, you may create marquee from bottom to top by using the top value.