Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
test
.bowerrc
.gitignore
.npmignore
LICENSE
README.md
bower.json
package.json
webpack.config.babel.js
webpack.prod.babel.js

README.md

jQuery Flipper

A simple way to add a CSS3 flip effect to your content.

Installation

$ bower install jquery-flipper --save

In your web page:

<html>
<head>
  <title>jQuery Flipper</title>
</head>
<body>
  <section id="myFlipper">
    <!-- There should be two elements inside the flipper -->
    <section class="front"></section>
    <section class="back"></section>
  </section>

  <script src="//code.jquery.com/jquery.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <script src="bower_components/jquery-flipper/dist/jquery.flipper.min.js"></script>
  <script>
    $('#myFlipper').flipper({
      rotationType: 'left-slide',
      depth: 1000,
      speed: 0.2
    });
  </script>
</body>
</html>

Options

You can also pass flipper options.

  • rotationType [string] the type of rotation (left, right, up, down, left-slide, right-slide)

  • event [string, object] this event to bind to

    • “hover”
    • “click”
    • {type: “keydown”, keyCode: 13}
  • depth [number] the perspective applied to the element rotation (100 - 1000)

  • speed [number] the speed of the rotation (0.1 - 2.0)

Examples

View the demo here or in the demo directory.