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