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>
</ol>

3. The CSS

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

Settings Sample:

Use data- attribute to control your effects

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

More examples:

• Default Example
• Global settings Example
• Local settings Example
• Time Setting Example
• Timing Setting Example
• Transition effect Example

---

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