https://github.com/thompsonemerson/cardmove
It's a plugin developed with JavaScript that allows you to dynamically animate angles and perspectives of cards on mouseover.
https://github.com/thompsonemerson/cardmove
angle animated card javascript mouseover perspective
Last synced: 2 months ago
JSON representation
It's a plugin developed with JavaScript that allows you to dynamically animate angles and perspectives of cards on mouseover.
- Host: GitHub
- URL: https://github.com/thompsonemerson/cardmove
- Owner: thompsonemerson
- License: mit
- Created: 2016-12-22T14:03:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-22T01:49:25.000Z (over 7 years ago)
- Last Synced: 2025-03-22T19:43:49.669Z (3 months ago)
- Topics: angle, animated, card, javascript, mouseover, perspective
- Language: JavaScript
- Homepage:
- Size: 7.85 MB
- Stars: 33
- Watchers: 2
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# CardMove
[](http://thompsonemerson.mit-license.org/)
[](https://travis-ci.org/thompsonemerson/cardmove)
[](https://badge.fury.io/gh/thompsonemerson%2Fcardmove)
[](https://badge.fury.io/bo/cardmove)
[](http://badge.fury.io/js/cardmove)
> CardMove is a plugin developed with JavaScript that allows you to dynamically animate angles and perspectives of cards on mouseover.
## Table of Contents
- [Install](#install)
- [Setup](#setup)
- [How to Use](#how-to-use)
- [Examples](#examples)
- [Contributing](#contributing)
- [History](#history)
- [License](#license)
## Install
NPM:
```bash
$ npm install cardmove --save
```
Bower:
```bash
$ bower install cardmove --save
```
Yarn:
```bash
$ yarn add cardmove
```
If you prefer you can just [download a ZIP](https://github.com/thompsonemerson/cardmove/archive/master.zip) file.
## Setup
First, include CardMove using the script located on the `dist` folder.
```html
```
Now we need to prepare our(s) card(s) markup for CardMove, like so:
```html
new CardMove('.card-item');
```
We're all set! CardMove is already working under the hood, and your card should be animated. Wasn't that easy?
## How to Use
| 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
...
```
```html
new CardMove('.card-item', {
angle: '[value]',
perspective: '[value]',
horizontal: '[value]',
vertical: '[value]',
speed: '[value]'
});
```
## Examples
> Check out a [demo on codepen](http://codepen.io/thompsonemerson/pen/aBxVma)
Images by [lorempixel](http://lorempixel.com).
### Item 1
> Default
```html
...
```
### Item 2
> Angle value `100`
```html
...
```
### Item 3
> Horizontal value `false`
```html
...
```
## Contributing
You can help improve these docs. Open an [issue](https://github.com/thompsonemerson/cardmove/issues/new) or submit a pull request.
1. Navigate to the main page of the repository
1. [Fork it!](https://github.com/thompsonemerson/cardmove#fork-destination-box)
1. Create your feature branch: `git checkout -b my-new-feature`
1. Commit your changes: `git commit -m 'Add some feature'`
1. Push to the branch: `git push origin my-new-feature`
1. Submit a pull request =D
[](https://github.com/feross/standard)
## History
See [Releases](https://github.com/thompsonemerson/cardmove/releases) for detailed changelog.
## License
[MIT License](http://thompsonemerson.mit-license.org/) © Emerson Thompson