Customizable marquee effect with jQuery and CSS3: 3 Demos

The marquee effect with 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 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:

<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:

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 marquee from bottom to top by using the top value.