Author: | ebow |
---|---|
Views Total: | 13,278 views |
Official Page: | Go to website |
Last Update: | February 20, 2014 |
License: | MIT |
Preview:

Description:
Bespoke-Fx is an awesome javascript library that allows to navigate through different sections of your page with a couple of CSS3 animations. Check the demo page and see in action using arrow keys.
Dependencies
- animations.css
- bespoke.js
- modernizr.js
How to use it:
Load the required CSS files in the head section of your page.
<link rel="stylesheet" href="src/main.css" type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" href="src/animations.css" type="text/css" media="screen" title="no title" charset="utf-8">
Load the necessary javascript files at the bottom of your page.
<script src="libs/modernizr/modernizr.custom.js" type="text/javascript" charset="utf-8"></script> <script src="src/bespoke.js"></script> <script src="src/bespoke-fx.js"></script>
Markup html structure.
<article> <section> Section 1 </section> <section> Section 2 </section> <section> Section 3 </section> ... </article>
You can pass options to the section by using the data-*
attribute on your legend, or by passing them in on initialization.
<section data-bespoke-fx-transition="move">Slide x</section>
All available transition options.
- move
- move-fade
- move-both-fade
- move-different-easing
- scale-down-out-move-in
- move-out-scale-up
- scale-up-up
- scale-down-up
- glue
- flip
- fall
- newspaper
- push
- pull
- fold
- unfold
- room
- cube
- carousel
- sides
- slide
Initialization.
bespoke.horizontal.from('article', { fx: true });
Available options to customize.
bespoke.vertical.from('article', { fx: { direction: "vertical", transition: "cube", reverse: true } });