This time I will share jQuery Plugin and tutorial about jQuery Plugin To Simulate Marquee Using CSS3 Animations – CSS3 Marquee, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> |
2 |
<script src="marquee.js"></script> |
2. Initialize the plugin on the target text container and we’re done.
1 |
<p class="demo">Css 3 Based Marquee</p> |
1 |
$('.demo').Css3Marquee(); |
3. Config the animation speed & sliding direction using HTML5 data attributes as these:
1 |
<p class="demo" data-direction='right'>Css 3 Based Marquee</p> |
2 |
<p class="demo" data-direction='top' data-speed=1>Css 3 Based Marquee</p> |
3 |
<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.
