CardMove is a plugin developed with JavaScript that allows you to dynamically animate angles and perspectives of cards on mouseover.
NPM:
$ npm install cardmove --saveBower:
$ bower install cardmove --saveYarn:
$ yarn add cardmoveIf you prefer you can just download a ZIP file.
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?
| 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 -->Check out a demo on codepen
Images by lorempixel.
Default
<div class="card-item">
<div class="card-content">
...Angle value
100
<div class="card-item" data-card-angle="100">
<div class="card-content">
...Horizontal value
false
<div class="card-item" data-card-horizontal="false">
<div class="card-content">
...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
See Releases for detailed changelog.
MIT License © Emerson Thompson