Advanced Search

jQuery plugin: Spiral animations

/ Published in: jQuery
Save to your folder(s)
A jQuery plugin that adds the .spiral() method, wich moves an element along an archimedean spiral path.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2.  *  Spiral [v1.1]
  3.  *  Distributed under the Do-wathever-the-hell-you-want-with-it License
  4.  *
  5.  *  Web site:	http://claudiobonifazi.com
  6.  *  Blog:	http://claudiobonifazi.com?p=4
  7.  *  Email:	claudio.bonifazi@gmail.com
  8.  *  Twitter:	@ClaudioBonifazi
  9.  */
  10.  
  11.  
  12.  
  13. /*
  14. 	Options = {
  15. 		Radius:	numeric (pixels), horizontal distance between starting and final points;
  16. 		Duration: number of milliseconds (as for animate) ;
  17. 		Easing:	the number of cicles - if it is higher than 2 it will make more turns and will assume a 'bouncing' deceleration effect
  18. 		Queue:	boolean (as for animate) ;
  19. 		Ydirection: boolean. If true, the rotation starts going up instead of down.
  20. 		Xdirection: boolean. If true the movement will be from left to the right, instead of right to left.
  21. 		InsideOut: boolean. If true, the object will whirl out from the inside of the spiral. Note that setting it to true changes the sense of Xdirection ;
  22. 	},
  23. 	Callback = function called when the animation ends (as for animate) ;
  24. */
  25. (function($){
  26. 	$.fn.spiral = function( Options, Callback ){
  27. 		/*-- Input filtering --*/
  28. 		Opt= {
  29. 			Radius:		150,
  30. 			Duration:	100,
  31. 			Easing:		2,
  32. 			Queue:		false,
  33. 			Xdirection:	false,
  34. 			Ydirection:	false,
  35. 			InsideOut:	false
  36. 		}
  37. 		$.extend(Opt,Options)
  38. 		if(!Callback)
  39. 			Callback= function(){return};
  40. 		/*-- Animation starts --*/
  41. 		return this.each(function(){
  42. 			var elem=$(this),
  43. 				start_l=parseInt(elem.css('margin-left')),
  44. 				start_t=parseInt(elem.css('margin-top')),
  45. 				start_z=elem.css('z-index');
  46. 			elem
  47. 			.animate({'z-index':start_z},{
  48. 				duration: Opt.Duration,
  49. 				complete: Callback,
  50. 				step:function(now,fx){
  51. 					fgamma = Opt.InsideOut ? Opt.Radius*(1+fx.pos) : Opt.Radius*(1-fx.pos);
  52. 					gamma=fx.pos*Opt.Easing*Math.PI;
  53. 					gamma=(Opt.Ydirection) ? -gamma : gamma;
  54. 					x=(Opt.Xdirection) ? (start_l+Opt.Radius-fgamma*Math.cos(gamma))+'px' : (start_l-Opt.Radius+fgamma*Math.cos(gamma))+'px';
  55. 					y=(start_t+fgamma*Math.sin(gamma))+'px';
  56. 					$(fx.elem).css({'margin-left':x,'margin-top':y})
  57. 				},
  58. 				queue: Opt.Queue
  59. 			})
  60. 		})
  61. 	}
  62. })(jQuery)

URL: http://claudiobonifazi.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.