CardMove

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

Table of Contents

• Install
• Setup
• How to Use
• Examples
• Contributing
• History
• License

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

<!-- 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.

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

History

See Releases for detailed changelog.

License

MIT License © Emerson Thompson