jQuery

【jQuery】CSS3カードフリップエフェクトjQuery Flipper

December 8, 2018
jQuery Flipper

jQuery FlipperはCSS3カードフリップエフェクト。

Installation

<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

  1. rotationType
  2. event
  3. depth
  4. speed

MIT