Examples
Images by http://lorempixel.com
<!-- Item 1 | Default -->
<div class="card-item">
<div class="card-content">
...
<!-- Image 2 | Angle value "100" -->
<div class="card-item" data-card-angle="100">
<div class="card-content">
...
<!-- Image 3 | Horizontal value "false" -->
<div class="card-item" data-card-horizontal="false">
<div class="card-content">
...
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>