Simple jQuery Text Rotator Plugin with Nice Fading effects - jLetter

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

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.