Full Page Slide Transitions with CSS3 and Bespoke-Fx

Category: Animation , Javascript , Recommended | February 20, 2014
Author:ebow
Views Total:13,257 views
Official Page:Go to website
Last Update:February 20, 2014
License:MIT

Preview:

Full Page Slide Transitions with CSS3 and Bespoke-Fx

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

You Might Be Interested In:


Leave a Reply