Full Page Slide Transitions with CSS3 and Bespoke-Fx

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
  }
});