Skip to content

Latest commit

 

History

History
166 lines (120 loc) · 4.14 KB

README.md

File metadata and controls

166 lines (120 loc) · 4.14 KB

CardMove

licence mit Build Status GitHub version Bower version npm version

CardMove is a plugin developed with JavaScript that allows you to dynamically animate angles and perspectives of cards on mouseover.

Table of Contents

Install

NPM:

$ npm install cardmove --save

Bower:

$ bower install cardmove --save

Yarn:

$ yarn add cardmove

If you prefer you can just download a ZIP file.

Setup

First, include CardMove using the script located on the dist folder.

<!-- CardMove JS minified -->
<script src="dist/cardmove.min.js"></script>

Now we need to prepare our(s) card(s) markup for CardMove, like so:

<!-- Item -->
<div class="card-item">
   <div class="card-content">
     <!-- Content of your item goes here -->
   </div>
</div>

<!-- Starting CardMove -->
<script>
  new CardMove('.card-item');
</script>

We're all set! CardMove is already working under the hood, and your card should be animated. Wasn't that easy?

How to Use

Property Type Default Description
angle number 30 Controls card's animation angle.
perspective number 300 Controls card's perspective.
horizontal boolean true Enables or disables horizontal animation.
vertical boolean true Enables or disables vertical animation.
speed number 500 Sets an animation speed in milliseconds.
<!-- HTML Element -->
<div
  class="card-item"
  data-card-angle="[value]"
  data-card-perspective="[value]"
  data-card-horizontal="[value]"
  data-card-vertical="[value]"
  data-card-speed="[value]">

  <div class="card-content">
  ...
<!-- JavaScript -->
<script>
   new CardMove('.card-item', {
       angle: '[value]',
       perspective: '[value]',
       horizontal: '[value]',
       vertical: '[value]',
       speed: '[value]'
   });
</script>

<!-- This is applied globally -->

Examples

Check out a demo on codepen
Images by lorempixel.

GIFs <3

Item 1

Default

<div class="card-item">
   <div class="card-content">
   ...

Item 2

Angle value 100

<div class="card-item" data-card-angle="100">
   <div class="card-content">
   ...

Item 3

Horizontal value false

<div class="card-item" data-card-horizontal="false">
   <div class="card-content">
   ...

Contributing

You can help improve these docs. Open an issue or submit a pull request.

  1. Navigate to the main page of the repository
  2. Fork it!
  3. Create your feature branch: git checkout -b my-new-feature
  4. Commit your changes: git commit -m 'Add some feature'
  5. Push to the branch: git push origin my-new-feature
  6. Submit a pull request =D

Standard - JavaScript Style Guide

History

See Releases for detailed changelog.

License

MIT License © Emerson Thompson