Customizable Marquee Effect with jQuery and CSS3

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.

You may customize the speed and direction of the marquee effect by using the data attribute or jQuery code.
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:

$(‘.demo-righttoleft’).Css3Marquee();

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:

A demo jQuery Css3Marquee plug-in of right to left marquee

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:

A top-to-bottom marquee demo with slow speed by using Css3Marquee plug-in

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.