Simple jQuery Text Rotator with Flip Effect - flippy

File Size: 3.06KB
Views Total: 4436
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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=""></script>
<script src="flippy.js"></script>

4. Call the plugin with options.

$(document).ready(function () {
// 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"

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