CSS slide transitions for Bespoke.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
libs/modernizr
spec
src
.editorconfig
.gitattributes
.gitignore
.jshintrc
.travis.yml
CONTRIBUTING.md
Gruntfile.js
LICENSE
README.md
bower.json
package.json

README.md

Build Status

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.

directionAnimation transition direction _horizontal_ or vertical
transitionSpecific animation to use for all slides. _move_ is default see below for all transitions
reverseSet to `true` to force the reverse animation to run.

Transitions

moveMoves both slides out and in evenly
move-fadeOut slide fades in place while next slide moves in over the top
move-both-fadeBoth slides move; out slide fades
move-different-easingBoth slides move at different speeds
scale-down-out-move-inOut slide scales down while next slide moves in over the top
move-out-scale-upMove out slide and scales up in slide
scale-up-upBoth slides scale upwards towards you
scale-down-upOut 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-fx

npm

$ npm install bespoke-fx

The 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)

License

MIT License