🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

CSS3 Marquee is a very small jQuery plugin used to simulate the legacy text Marquee effect with support for custom directions, animation speed and pause on hover.

scroller Marquee

Documentation

CSS3 Marquee

Jquery plugin for marquee effect using CSS3. Demo

Why?

The default marquee html tag animation is not smooth in all browsers. It's looks very choppy in all browsers except Chromium and Chrome. So we decided to use CSS3 animation property to solve this problem. It will work in WebKit as well.

Dependncy

  1. Jquery

Usage

  1. Include below script tag in to your html page

    <script type="application/javascript" src="//cdn.rawgit.com/nviswanathan/Css3Marquee/master/marquee.js"></script>
  2. Create Your Marquee content

    <div> 	<p class="righttoleft" data-direction='left'>Css 3 Based Marquee</p> </div>
  3. Select your content and apply the effect

    $('.righttoleft').Css3Marquee();

Options

You can change the options in two ways:

  1. Use HTML data attribute.

    <p class="righttoleft" data-direction='left' data-speed=10>Css 3 Based Marquee</p>
  2. Params.

    $('.righttoleft').Css3Marquee({ 	direction:'left', 	speed: 10 });

Default

{   direction:'left', //['left', 'right', 'bottom', 'top']   speed:10 }

TODO:

  1. Page resize

    ​


You May Also Like