CardMove

It's a plugin developed with JavaScript, that allows to dynamically animate angle and perspective of card with mouseover.

Table of Contents

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

Install

Get with npm

$ npm install cardmove --save

bower

$ bower install cardmove --save

If you prefer you can just download a ZIP file.

Setup

First, include the script located on the dist folder.

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

Now need to prepare our(s) card(s) and show to the CardMove.

<!-- Item -->
<div class="card-item">
   <div class="card-content">
     <!-- Content of your item here -->
   </div>
</div>
 
<!-- Starting the CardMove -->
<script>
  new CardMove('.card-item');
</script> 

Ready, prepared environment, now is hour of our plugin take action and prepare all remaining process.
Now says it is not easy?! ;)

How to Use

Property	Type	Default	Description
angle	number	30	Regulates the angle of the animation card.
perspective	number	300	Regulates the perspective of the animation card.
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> 
 
<!-- Thus it is applied universally -->

Examples

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

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