CardMove

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

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

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.

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.

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

History

See Releases for detailed changelog.

thompsonemerson/cardmove