jQuery Plugin To Simulate Marquee Using CSS3 Animations - CSS3 Marquee

File Size: 4.65 KB
Views Total: 4731
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Simulate Marquee Using CSS3 Animations - CSS3 Marquee

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. Heavily based on CSS3 animation, transition and transform properties.

How to use it:

1. Load the latest version of jQuery library and the jQuery CSS3 Marquee's script in the webpage.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="marquee.js"></script>

2. Initialize the plugin on the target text container and we're done.

<p class="demo">Css 3 Based Marquee</p>
$('.demo').Css3Marquee();

3. Config the animation speed & sliding direction using HTML5 data attributes as these:

<p class="demo" data-direction='right'>Css 3 Based Marquee</p>
<p class="demo" data-direction='top' data-speed=1>Css 3 Based Marquee</p>
<p class="demo" data-direction='bottom' data-speed=1>Css 3 Based Marquee</p>

This awesome jQuery plugin is developed by nviswanathan. For more Advanced Usages, please check the demo page or visit the official website.