Simple jQuery Text Rotator with Flip Effect - flippy

flippy is a jQuery plugin used to add a super simple rotating text to your webpage with an interesting text flip effect.

How to use it:

1. Create a list of text you want to rotate.

<ul class="flippy">
<li>jQuery Plugins</li>
<li>jQueryScript.Net</li>
<li>jQuery.COM</li>
</ul>

2. The required CSS styles.

.flippy {
position: relative;
}
.flippy > * {
position: absolute;
opacity: 0;
top: -50px;
}
.flippy > *:first-child {
opacity: 1;
top: 0;
}

3. Load the JQuery library and jQuery flippy plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="flippy.js"></script>

4. Call the plugin with options.

<script>
$(document).ready(function () {
$('.flippy').flippy({
// stop after iteration through all items
stop: false,
// time (seconds) between flipps
interval: 3,
// speed (ms) of animations
speed: 1000,
// distance to fade out
distance: "150px"
});
});
</script>>

---

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