bespoke-fx
CSS slide transitions for bespoke.js
Download
Download the production version or the development version, or use a package manager.
Demo
View the demo at the official Bespoke-fx project page.
Usage
First, include both bespoke.js and bespoke-fx.js in your page.
Second, include the styles main.css and animations.css.
For example
<link rel="stylesheet" href="path/to/main.css"> <link rel="stylesheet" href="path/to/animations.css"> <article> <section>Slide 1</section> <section>Slide 2</section> <section>Slide 3</section> </article> <script src="bespoke.min.js"></script> <script src="bespoke-fx.min.js"></script> <script src="path/to/my/script.js"></script>Then, simply include the plugin when instantiating your presentation.
bespoke.horizontal.from('article', { fx: true });You can set custom options during instatiating
bespoke.vertical.from('article', { fx: { direction: "vertical", transition: "cube", reverse: true } });Options
note: italics indicate default.
| direction | Animation transition direction _horizontal_ or vertical |
| transition | Specific animation to use for all slides. _move_ is default see below for all transitions |
| reverse | Set to `true` to force the reverse animation to run. |
Transitions
| move | Moves both slides out and in evenly |
| move-fade | Out slide fades in place while next slide moves in over the top |
| move-both-fade | Both slides move; out slide fades |
| move-different-easing | Both slides move at different speeds |
| scale-down-out-move-in | Out slide scales down while next slide moves in over the top |
| move-out-scale-up | Move out slide and scales up in slide |
| scale-up-up | Both slides scale upwards towards you |
| scale-down-up | Out slide scales downward before next slide scales upward |
| glue | |
| flip | |
| fall | |
| newspaper | |
| push | |
| pull | |
| fold | |
| unfold | |
| room | |
| cube | |
| carousel | |
| sides | |
| slide |
Override options per slide
Use data-bespoke-transition, data-bespoke-direction, and/or data-bespoke-reverse on a slide to override the global options.
This is useful when you want to transition a single slide in a different way to other slides.
eg.
<section data-bespoke-fx-transition="cube" data-bespoke-fx-direction="vertical" data-bespoke-fx-reverse="true">Slide</section>Package managers
Bower
$ bower install bespoke-fxnpm
$ npm install bespoke-fxThe bespoke-fx npm package is designed for use with browserify, e.g.
require('bespoke'); require('bespoke-fx');Credits
This plugin was built with generator-bespokeplugin. Inspired by a Codrops article (see demo)
