CSS slide transitions for bespoke.js
Download the production version or the development version, or use a package manager.
View the demo at the official Bespoke-fx project page.
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
}
});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. |
| 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 |
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>$ bower install bespoke-fx$ npm install bespoke-fxThe bespoke-fx npm package is designed for use with browserify, e.g.
require('bespoke');
require('bespoke-fx');This plugin was built with generator-bespokeplugin. Inspired by a Codrops article (see demo)