https://github.com/minimac/rocket
Rocket create an animation from two items via jQuery
https://github.com/minimac/rocket
Last synced: 11 months ago
JSON representation
Rocket create an animation from two items via jQuery
- Host: GitHub
- URL: https://github.com/minimac/rocket
- Owner: miniMAC
- License: mit
- Created: 2015-06-10T13:00:05.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-06-15T11:07:04.000Z (almost 11 years ago)
- Last Synced: 2025-03-16T07:41:32.736Z (about 1 year ago)
- Language: CSS
- Homepage: http://minimamente.com/example/rocket/
- Size: 121 KB
- Stars: 161
- Watchers: 9
- Forks: 49
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
:rocket: rocket
=====
Rocket creates an animation when an item is moved to another element.
Take a look: [DEMO PAGE](http://minimamente.com/example/rocket/)
Include the CSS style: rocket.css or rocket.min.css
and
include the JS file: rocket.js or rocket.min.js
Example:
```html
```
##Usage
Use this function on your javascript file: `rocketcss(rocket, target, theclass)`
1. Replace `rocket` with the class item that you want to move.
2. Replace `target` with the class item that you want to use as target.
3. Replace `theclass` with one of those available animations: rocketPulse, rocketPulseHole, rocketRotate, rocketRotateHole, rocketRotateGo, rocketGost, rocketFlip, rocketCircle
##Extra
You can add a special class targetPulse to the target element in your custom script file action.
##Basic Example
Simple example on click
```js
$('.yourBtnClass').on('click', function() {
rocketcss(this,'.yourTargetClass', 'rocketPulse');
$('.yourTargetClass').addClass('targetPulse');
});
```