Simple jQuery Text Rotator Plugin with Nice Fading effects - jLetter
File Size: | 10.5KB |
---|---|
Views Total: | 6931 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jLetter is a simple, cross-browser and easy-to-use jQuery plugin that allows you to create a text rotator (or banner rotator, text slideshow) with nice random fading effects.
How to use it:
1. Download and include jQuery library and jLetter in the head section of your html page
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="js/jletter.min.js"></script>
2. Markup Html structure:
<div id="demo"> <div data-type="slide"> <p>jQueryScript.Net</p> </div> <div data-type="slide"> <p>jLetter Slider</p> </div> <div data-type="slide"> <p>jQuery</p> </div> <div data-type="slide"> <p>JavaScript</p> </div> <div data-type="slide"> <p>HTML5</p> </div> </div>
3. The CSS
.jletter { background: rgb(167,207,223); /* Old browsers */ background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(167,207,223,1)), color-stop(100%, rgba(35,83,138,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a', GradientType=0 ); /* IE6-9 */ border-radius: 10px; } .jletter .panel p { padding: 0; margin: 30px 0px 0px 0px; text-align: center; font-family: 'Georgia'; font-size: 24px; font-weight: bold; color: #fff; }
4. Call the plugin
<script> $('document').ready(function(){ $('#demo').jLetter(); }); </script>
This awesome jQuery plugin is developed by no81no. For more Advanced Usages, please check the demo page or visit the official website.