├── LICENSE
├── README.md
├── rocket.css
├── rocket.js
├── rocket.min.css
└── rocket.min.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Christian
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | :rocket: rocket
 2 | =====
 3 | 
 4 | Rocket creates an animation when an item is moved to another element.
 5 | Take a look: [DEMO PAGE](http://minimamente.com/example/rocket/)
 6 | 
 7 | Include the CSS style: rocket.css or rocket.min.css
 8 | and
 9 | include the JS file: rocket.js or rocket.min.js
10 | 
11 | Example:
12 | ```html
13 | <link rel="stylesheet" href="rocket.min.css">
14 | <script src="rocket.min.js"></script>
15 | ```
16 | 
17 | ##Usage
18 | 
19 | Use this function on your javascript file: `rocketcss(rocket, target, theclass)`
20 | 
21 | 1. Replace `rocket` with the class item that you want to move.
22 | 2. Replace `target` with the class item that you want to use as target.
23 | 3. Replace `theclass` with one of those available animations: rocketPulse, rocketPulseHole, rocketRotate, rocketRotateHole, rocketRotateGo, rocketGost, rocketFlip, rocketCircle
24 | 
25 | ##Extra
26 | 
27 | You can add a special class targetPulse to the target element in your custom script file action.
28 | 
29 | ##Basic Example
30 | 
31 | Simple example on click
32 | 
33 | ```js
34 | $('.yourBtnClass').on('click', function() {
35 | 	rocketcss(this,'.yourTargetClass', 'rocketPulse');
36 | 	$('.yourTargetClass').addClass('targetPulse');
37 | });
38 | ```
39 | 


--------------------------------------------------------------------------------
/rocket.css:
--------------------------------------------------------------------------------
  1 | /*Rocket*/
  2 | .mover {
  3 |   -webkit-animation-duration: 1.5s;
  4 |   animation-duration: 1.5s;
  5 |   -webkit-animation-fill-mode: both;
  6 |   animation-fill-mode: both;
  7 | }
  8 | 
  9 | /* rocketPulse */
 10 | @keyframes rocketPulse {
 11 |   0% {
 12 |     -webkit-transform: scale3d(1,1,1);
 13 |     transform: scale3d(1,1,1);
 14 |   }
 15 | 
 16 |   50% {
 17 |     -webkit-transform: scale3d(2,2,2);
 18 |     transform: scale3d(2,2,2);
 19 |   }
 20 | 
 21 |   100% {
 22 |     -webkit-transform: scale3d(1,1,1);
 23 |     transform: scale3d(1,1,1);
 24 |   }
 25 | }
 26 | 
 27 | @-webkit-keyframes rocketPulse {
 28 |   0% {
 29 |     -webkit-transform: scale3d(1,1,1);
 30 |     transform: scale3d(1,1,1);
 31 |   }
 32 | 
 33 |   50% {
 34 |     -webkit-transform: scale3d(2,2,2);
 35 |     transform: scale3d(2,2,2);
 36 |   }
 37 | 
 38 |   100% {
 39 |     -webkit-transform: scale3d(1,1,1);
 40 |     transform: scale3d(1,1,1);
 41 |   }
 42 | }
 43 | 
 44 | .rocketPulse {
 45 |   -webkit-animation-name: rocketPulse;
 46 |   animation-name: rocketPulse;
 47 | }
 48 | 
 49 | /* rocketPulseHole */
 50 | @keyframes rocketPulseHole {
 51 |   0% {
 52 |     -webkit-transform: scale3d(1,1,1);
 53 |     transform: scale3d(1,1,1);
 54 |   }
 55 | 
 56 |   70% {
 57 |     -webkit-transform: scale3d(1.5,1.5,1.5);
 58 |     transform: scale3d(1.5,1.5,1.5);
 59 |   }
 60 | 
 61 |   100% {
 62 |     -webkit-transform: scale3d(0,0,0);
 63 |     transform: scale3d(0,0,0);
 64 |   }
 65 | }
 66 | 
 67 | @-webkit-keyframes rocketPulseHole {
 68 |   0% {
 69 |     -webkit-transform: scale3d(1,1,1);
 70 |     transform: scale3d(1,1,1);
 71 |   }
 72 | 
 73 |   70% {
 74 |     -webkit-transform: scale3d(1.5,1.5,1.5);
 75 |     transform: scale3d(1.5,1.5,1.5);
 76 |   }
 77 | 
 78 |   100% {
 79 |     -webkit-transform: scale3d(0,0,0);
 80 |     transform: scale3d(0,0,0);
 81 |   }
 82 | }
 83 | 
 84 | .rocketPulseHole {
 85 |   -webkit-animation-name: rocketPulseHole;
 86 |   animation-name: rocketPulseHole;
 87 | }
 88 | 
 89 | /* rocketRotate */
 90 | @keyframes rocketRotate {
 91 |   0% {
 92 |     -webkit-transform: scale3d(1,1,1);
 93 |     -webkit-transform: rotateZ(0deg);
 94 |     transform: scale3d(1,1,1);
 95 |     transform: rotateZ(0deg);
 96 |   }
 97 | 
 98 |   100% {
 99 |     -webkit-transform: scale3d(1,1,1);
100 |     -webkit-transform: rotateZ(720deg);
101 |     transform: scale3d(1,1,1);
102 |     transform: rotateZ(720deg);
103 |   }
104 | }
105 | 
106 | @-webkit-keyframes rocketRotate {
107 |   0% {
108 |     -webkit-transform: scale3d(1,1,1);
109 |     -webkit-transform: rotateZ(0deg);
110 |     transform: scale3d(1,1,1);
111 |     transform: rotateZ(0deg);
112 |   }
113 | 
114 |   100% {
115 |     -webkit-transform: scale3d(1,1,1);
116 |     -webkit-transform: rotateZ(720deg);
117 |     transform: scale3d(1,1,1);
118 |     transform: rotateZ(720deg);
119 |   }
120 | }
121 | 
122 | .rocketRotate {
123 |   -webkit-animation-name: rocketRotate;
124 |   animation-name: rocketRotate;
125 | }
126 | 
127 | /* rocketRotateHole */
128 | @keyframes rocketRotateHole {
129 |   0% {
130 |     -webkit-transform: rotate(0deg) scale(1);
131 |     transform: rotate(0deg) scale(1);
132 |   }
133 | 
134 |   100% {
135 |     -webkit-transform: rotate(180deg) scale(0);
136 |     transform: rotate(180deg) scale(0);
137 |   }
138 | }
139 | 
140 | @-webkit-keyframes rocketRotateHole {
141 |   0% {
142 |     -webkit-transform: rotate(0deg) scale(1);
143 |     transform: rotate(0deg) scale(1);
144 |   }
145 | 
146 |   100% {
147 |     -webkit-transform: rotate(180deg) scale(0);
148 |     transform: rotate(180deg) scale(0);
149 |   }
150 | }
151 | 
152 | .rocketRotateHole {
153 |   -webkit-animation-name: rocketRotateHole;
154 |   animation-name: rocketRotateHole;
155 | }
156 | 
157 | /* rocketRotateGo */
158 | @keyframes rocketRotateGo {
159 |   0% {
160 |     -webkit-transform: rotate(720deg) scale(1);
161 |     transform: rotate(720deg) scale(1);
162 |   }
163 | 
164 |   100% {
165 |     -webkit-transform: rotate(0deg) scale(0);
166 |     transform: rotate(0deg) scale(0);
167 |   }
168 | }
169 | 
170 | @-webkit-keyframes rocketRotateGo {
171 |   0% {
172 |     -webkit-transform: rotate(720deg) scale(1);
173 |     transform: rotate(720deg) scale(1);
174 |   }
175 | 
176 |   100% {
177 |     -webkit-transform: rotate(0deg) scale(0);
178 |     transform: rotate(0deg) scale(0);
179 |   }
180 | }
181 | 
182 | .rocketRotateGo {
183 |   -webkit-animation-name: rocketRotateGo;
184 |   animation-name: rocketRotateGo;
185 | }
186 | 
187 | /* rocketGost */
188 | @-webkit-keyframes rocketGost {
189 |   0% {
190 |     opacity: 1;
191 |   }
192 | 
193 |   100% {
194 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
195 |     transform: rotate3d(0, 0, 1, -45deg);
196 |     opacity: 0;
197 |   }
198 | }
199 | 
200 | @keyframes rocketGost {
201 |   0% {
202 |     opacity: 1;
203 |   }
204 | 
205 |   100% {
206 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
207 |     transform: rotate3d(0, 0, 1, -45deg);
208 |     opacity: 0;
209 |   }
210 | }
211 | 
212 | .rocketGost {
213 |   -webkit-animation-name: rocketGost;
214 |   animation-name: rocketGost;
215 |   -webkit-animation-delay: .3s;
216 |   animation-delay: .3s;
217 | }
218 | 
219 | /* rocketFlip */
220 | @-webkit-keyframes rocketFlip {
221 |   0% {
222 |     opacity: 1;
223 |     -webkit-transform: rotateY(360deg);
224 |     transform: rotateY(360deg);
225 |   }
226 | 
227 |   100% {
228 |     opacity: 0;
229 |     -webkit-transform: rotateY(0deg);
230 |     transform: rotateY(0deg);
231 |   }
232 | }
233 | 
234 | @keyframes rocketFlip {
235 |   0% {
236 |     opacity: 1;
237 |     -webkit-transform: rotateY(360deg);
238 |     transform: rotateY(360deg);
239 |   }
240 | 
241 |   100% {
242 |     opacity: 0;
243 |     -webkit-transform: rotateY(0deg);
244 |     transform: rotateY(0deg);
245 |   }
246 | }
247 | 
248 | .rocketFlip {
249 |   -webkit-animation-name: rocketFlip;
250 |   animation-name: rocketFlip;
251 | }
252 | 
253 | /* rocketCircle */
254 | @-webkit-keyframes rocketCircle {
255 |   0% {
256 |     opacity: 1;
257 |     -webkit-border-radius: 999px;
258 |     border-radius: 999px;
259 |     -webkit-transform: scale3d(1,1,1);
260 |     transform: scale3d(1,1,1);
261 |   }
262 | 
263 |   100% {
264 |     opacity: 0;
265 |     -webkit-border-radius: 999px;
266 |     border-radius: 999px;
267 |     -webkit-transform: scale3d(0,0,0);
268 |     transform: scale3d(0,0,0);
269 |   }
270 | }
271 | 
272 | @keyframes rocketCircle {
273 |   0% {
274 |     opacity: 1;
275 |     -webkit-border-radius: 999px;
276 |     border-radius: 999px;
277 |     -webkit-transform: scale3d(1,1,1);
278 |     transform: scale3d(1,1,1);
279 |   }
280 | 
281 |   100% {
282 |     opacity: 0;
283 |     -webkit-border-radius: 999px;
284 |     border-radius: 999px;
285 |     -webkit-transform: scale3d(0,0,0);
286 |     transform: scale3d(0,0,0);
287 |   }
288 | }
289 | 
290 | .rocketCircle {
291 |   -webkit-animation-name: rocketCircle;
292 |   animation-name: rocketCircle;
293 | }
294 | 
295 | /* only for target: targetPulse */
296 | @-webkit-keyframes targetPulse {
297 |   0%, 20%, 60% {
298 |     -webkit-transform: scale3d(1, 1, 1);
299 |     transform: scale3d(1, 1, 1);
300 |   }
301 | 
302 |   40%, 80% {
303 | 	-webkit-transform: scale3d(1.2, 1.2, 1.2);
304 | 	transform: scale3d(1.2, 1.2, 1.2);
305 |   }
306 | 
307 |   100% {
308 |     -webkit-transform: scale3d(1, 1, 1);
309 |     transform: scale3d(1, 1, 1);
310 |   }
311 | }
312 | 
313 | @keyframes targetPulse {
314 |   0%, 20%, 60% {
315 |     -webkit-transform: scale3d(1, 1, 1);
316 |     transform: scale3d(1, 1, 1);
317 |   }
318 | 
319 |   40%, 80% {
320 |     -webkit-transform: scale3d(1.2, 1.2, 1.2);
321 |     transform: scale3d(1.2, 1.2, 1.2);
322 |   }
323 | 
324 |   100% {
325 |     -webkit-transform: scale3d(1, 1, 1);
326 |     transform: scale3d(1, 1, 1);
327 |   }
328 | }
329 | 
330 | .targetPulse {
331 | 	-webkit-animation-duration: 1s;
332 | 	animation-duration: 1s;
333 | 	-webkit-animation-fill-mode: both;
334 | 	animation-fill-mode: both;
335 | 	-webkit-animation-name: targetPulse;
336 | 	animation-name: targetPulse;
337 | 	-webkit-animation-delay: 1.2s;
338 | 	animation-delay: 1.2s;
339 | }
340 | 


--------------------------------------------------------------------------------
/rocket.js:
--------------------------------------------------------------------------------
 1 | function rocketcss(rocket, target, theclass) {
 2 | 
 3 | 	var cloned = $(rocket).clone();
 4 | 	
 5 | 	var offset_target = $(target).offset();
 6 | 	var offset_rocket = $(rocket).offset();
 7 | 	
 8 | 	cloned.insertAfter(rocket);
 9 | 	$(rocket).css({ "opacity": "0" });
10 | 	cloned.css({ "position": "fixed", "z-index": "999999", "top": offset_rocket.top + "px", "left": offset_rocket.left + "px", "right": "auto", "bottom": "auto", "margin": "auto", "padding": "auto", "opacity": "1" }).animate({ 'top': offset_target.top + 'px', 'left': offset_target.left + 'px'}, 1500);
11 | 	cloned.addClass('mover ' + (theclass || 'rocketPulseHole') );
12 | 	setTimeout(function () {
13 | 		cloned.fadeOut(300);
14 | 	}, 1500);
15 | 	return cloned;
16 | }
17 | 


--------------------------------------------------------------------------------
/rocket.min.css:
--------------------------------------------------------------------------------
1 | .mover{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}@keyframes rocketPulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}50%{-webkit-transform:scale3d(2,2,2);transform:scale3d(2,2,2);}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}@-webkit-keyframes rocketPulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}50%{-webkit-transform:scale3d(2,2,2);transform:scale3d(2,2,2);}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}.rocketPulse{-webkit-animation-name:rocketPulse;animation-name:rocketPulse;}@keyframes rocketPulseHole{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}70%{-webkit-transform:scale3d(1.5,1.5,1.5);transform:scale3d(1.5,1.5,1.5);}100%{-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0);}}@-webkit-keyframes rocketPulseHole{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}70%{-webkit-transform:scale3d(1.5,1.5,1.5);transform:scale3d(1.5,1.5,1.5);}100%{-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0);}}.rocketPulseHole{-webkit-animation-name:rocketPulseHole;animation-name:rocketPulseHole;}@keyframes rocketRotate{0%{-webkit-transform:scale3d(1,1,1);-webkit-transform:rotateZ(0deg);transform:scale3d(1,1,1);transform:rotateZ(0deg);}100%{-webkit-transform:scale3d(1,1,1);-webkit-transform:rotateZ(720deg);transform:scale3d(1,1,1);transform:rotateZ(720deg);}}@-webkit-keyframes rocketRotate{0%{-webkit-transform:scale3d(1,1,1);-webkit-transform:rotateZ(0deg);transform:scale3d(1,1,1);transform:rotateZ(0deg);}100%{-webkit-transform:scale3d(1,1,1);-webkit-transform:rotateZ(720deg);transform:scale3d(1,1,1);transform:rotateZ(720deg);}}.rocketRotate{-webkit-animation-name:rocketRotate;animation-name:rocketRotate;}@keyframes rocketRotateHole{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);}100%{-webkit-transform:rotate(180deg) scale(0);transform:rotate(180deg) scale(0);}}@-webkit-keyframes rocketRotateHole{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);}100%{-webkit-transform:rotate(180deg) scale(0);transform:rotate(180deg) scale(0);}}.rocketRotateHole{-webkit-animation-name:rocketRotateHole;animation-name:rocketRotateHole;}@keyframes rocketRotateGo{0%{-webkit-transform:rotate(720deg) scale(1);transform:rotate(720deg) scale(1);}100%{-webkit-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);}}@-webkit-keyframes rocketRotateGo{0%{-webkit-transform:rotate(720deg) scale(1);transform:rotate(720deg) scale(1);}100%{-webkit-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);}}.rocketRotateGo{-webkit-animation-name:rocketRotateGo;animation-name:rocketRotateGo;}@-webkit-keyframes rocketGost{0%{opacity:1;}100%{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0;}}@keyframes rocketGost{0%{opacity:1;}100%{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0;}}.rocketGost{-webkit-animation-name:rocketGost;animation-name:rocketGost;-webkit-animation-delay:.3s;animation-delay:.3s;}@-webkit-keyframes rocketFlip{0%{opacity:1;-webkit-transform:rotateY(360deg);transform:rotateY(360deg);}100%{opacity:0;-webkit-transform:rotateY(0deg);transform:rotateY(0deg);}}@keyframes rocketFlip{0%{opacity:1;-webkit-transform:rotateY(360deg);transform:rotateY(360deg);}100%{opacity:0;-webkit-transform:rotateY(0deg);transform:rotateY(0deg);}}.rocketFlip{-webkit-animation-name:rocketFlip;animation-name:rocketFlip;}@-webkit-keyframes rocketCircle{0%{opacity:1;-webkit-border-radius:999px;border-radius:999px;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}100%{opacity:0;-webkit-border-radius:999px;border-radius:999px;-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0);}}@keyframes rocketCircle{0%{opacity:1;-webkit-border-radius:999px;border-radius:999px;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}100%{opacity:0;-webkit-border-radius:999px;border-radius:999px;-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0);}}.rocketCircle{-webkit-animation-name:rocketCircle;animation-name:rocketCircle;}@-webkit-keyframes targetPulse{0%,20%,60%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}40%,80%{-webkit-transform:scale3d(1.2,1.2,1.2);transform:scale3d(1.2,1.2,1.2);}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}@keyframes targetPulse{0%,20%,60%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}40%,80%{-webkit-transform:scale3d(1.2,1.2,1.2);transform:scale3d(1.2,1.2,1.2);}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}.targetPulse{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:targetPulse;animation-name:targetPulse;-webkit-animation-delay:1.2s;animation-delay:1.2s;}
2 | 


--------------------------------------------------------------------------------
/rocket.min.js:
--------------------------------------------------------------------------------
1 | function rocketcss(t,o,e){var a=$(t).clone(),i=$(o).offset(),s=$(t).offset();return a.insertAfter(t),$(t).css({opacity:"0"}),a.css({position:"fixed","z-index":"999999",top:s.top+"px",left:s.left+"px",right:"auto",bottom:"auto",margin:"auto",padding:"auto",opacity:"1"}).animate({top:i.top+"px",left:i.left+"px"},1500),a.addClass("mover "+(e||"rocketPulseHole")),setTimeout(function(){a.fadeOut(300)},1500),a}
2 | 


--------------------------------------------------------------------------------