cardmove v1.0.0

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

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