Flexible Animation Builder with jQuery - Flexa

File Size: 289KB
Views Total: 1290
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Flexible Animation Builder with jQuery - Flexa

Flexa is a flexible animation builder built with jQuery that make it easy to create and control scene changing effects using only Html.

Basic Usage:

1. Download and include the latest jQuery library and Flexa.js on your html page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="js/jquery.flexa.js"></script>

2. The HTML

<ol id="Flexa" data-flexa-enable="true">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>

3. The CSS

#Flexa {
    position: relative;
    overflow: hidden;
#Flexa li {
    width: 640px;
    height: 480px;

Settings Sample:

Use data- attribute to control your effects

<ol id="Flexa"
    <li data-duration="1000">Slide 1</li>
    <li data-transtion="left">Slide 2</li>
    <li data-timing="sequence">Slide 3</li>

More examples:

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