Simple jQuery Text Rotator Plugin with Nice Fading effects - jLetter
| File Size: | 10.5KB |
|---|---|
| Views Total: | 6977 |
| 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.











