https://github.com/atomantic/jquery.imgexplosion

💥Firework explosion of an image, optionally rotating into the screen in variable sizes and exploding at the end. w00t.
https://github.com/atomantic/jquery.imgexplosion

Last synced: about 1 year ago
JSON representation

💥Firework explosion of an image, optionally rotating into the screen in variable sizes and exploding at the end. w00t.

• Host: GitHub
• URL: https://github.com/atomantic/jquery.imgexplosion
• Owner: atomantic
• Created: 2011-01-29T19:40:38.000Z (over 15 years ago)
• Default Branch: master
• Last Pushed: 2013-07-02T22:46:23.000Z (almost 13 years ago)
• Last Synced: 2025-03-28T01:49:54.682Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://atomantic.github.com/jquery.imgExplosion
• Size: 249 KB
• Stars: 13
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
#License#

@author Adam Eivy (antic | atomantic)  

@link [http://intellectualpirates.net](http://intellectualpirates.net)  

@license Copyright (c) 2011 Adam Eivy (antic | atomantic) Dual licensed under the MIT and GPL licenses:  

 * [http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php)  

 * [http://www.gnu.org/licenses/gpl.html](http://www.gnu.org/licenses/gpl.html)

#What it does:#

This is a fancy animation effect that throws a bunch of clones of an image onto the page, either shooting up from the bottom or falling down from the top.

It randomizes the size of the image between a min constraint and the maximum size of the source graphic.

It also, optionally, explodes at the end as it fades out.

The explosion effect at the end of the image's journey into the page requires jquery.ui--but if you omit jquery.ui, the code will fallback on a simple fadeOut.

#Usage:#

	

	

	

	!window.jQuery && document.write(unescape('%3Cscript src="jquery.min.js"%3E%3C/script%3E'))

	

	

	

	

	!window.jQuery.ui && document.write(unescape('%3Cscript src="jquery-ui.min.js"%3E%3C/script%3E'))

	

	

	

	

	

		$(function(){

			

			// simplest call, uses defaults:

			$.fn.imgExplosion();

			

			// adjusting call to a new image or image path

			$.fn.imgExplosion({

				img:'/img/somenewimage.png'

			});

			

			// using an image on the page

			$('#ImageID').imgExplosion();

			

			// showing all defaults in options:

			$.fn.imgExplosion({

				// path to the image to firework (only needed if not attached to an image olready on the page)

		     	img: '/img/star.png',

				// how many images should we load before stopping the animation

				num: 24,				

				// minimum random width of the image in pixels

				min: 20,

				// should we explode or just hide after throwing the image? explode requires jquery.ui

				explode:true,	

				// should the image rotate into the page?

				rot: true,

				// where to start from (currently only supporting bottom or top)

				start:'bottom',

				// should we swap between top and bottom every throw

				alternate:false,

				// should we randomize the ending x coordinate (thrown at angle)?

				randEnd:false,

				// what z-index should we lay them on

				z: 1001

			});

			

		});

	

#Demos:#

The repository holds a demo in index.html, which is published on the github project page:

[Demo](http://atomantic.github.com/jquery.imgExplosion)