Which plugin can I use to create this (a presentation)?

JavaScript
1

Hi guys, please take a look at this site: http://createdm.com/ - I’m wanting to create an opening presentation like theirs using jquery, css3 etc, does anyone know of a plugin that could do something similar?

Thanks,
Aaron

2

It’s just a bunch of jQuery $.animate() calls nested inside eachother.

Here’s a recent animation I did: http://foowiki.org/
And the script that runs it:



	/*================================================================================
	| Home-page animation
	|
	| The animation will make it look as if the logo flys up, open up the
	| navigation, and then slide in each nav button individually
	================================================================================*/
	$('body').animate({'background-position-y': -1*logo_min_y}, 1000, 'easeOutBack');	//Animate the background
	$('#home-tagline').delay(2000).fadeTo(3000, 1);
	
	/*--------------------------------------------------------------------------------
	| Animate the info box
	--------------------------------------------------------------------------------*/
	$('#home-info-wrapper').delay(1000).fadeTo(0, 1).animate({width: 317}, 1000, 'easeInOutQuint', function(){
		$('#home-404').fadeTo(250, 1);
	});

	/*--------------------------------------------------------------------------------
	| Bring in the logo
	--------------------------------------------------------------------------------*/
	$('#home-main-spacer').animate(
		{height: logo_min_y},
		1000,
		'easeOutBack',

		/*--------------------------------------------------------------------------------
		| Expand the menu
		--------------------------------------------------------------------------------*/
		function(){
			$('#home-menu-wrapper').slideDown(1000, 'easeOutBounce', function(){
				/*--------------------------------------------------------------------------------
				| Animate each menu item in
				--------------------------------------------------------------------------------*/
				animateMenuItems($('#home-menu li').first(), 0);
			});
		}
	);

/*================================================================================
| Animates the menu items, one after another, recursively
|
| obj = element to animate
================================================================================*/
function animateMenuItems(obj, delay){
	var menu_icons = $('.menu-icon').length;	//Cache the number of menu items
	var dest = $(window).width()/2 - ($('.menu-icon').length - obj.index()) * 100 + $('.menu-icon').length * 50;
	
	/*--------------------------------------------------------------------------------
	| Animate
	--------------------------------------------------------------------------------*/
	obj.delay(delay).animate(
		{left: dest},
		{	duration: 1000,
			easing: 'easeOutElastic',
			step: function(now, fx){
				/*--------------------------------------------------------------------------------
				| Recursively call this function
				--------------------------------------------------------------------------------*/
				if(!obj.data('completed')){
					if(obj.index() < menu_icons){
						obj.data('completed', true);	//Don't call this again
						animateMenuItems(obj.next(), dest);	//Animate the next item
					}
				}
			},
			complete: function(){
				$(this).data('intro', false);	//Allow hover animations now
			}			
		}
	);
}

The majority of it is comments, and there’s really no math. You just fill in the coordinates of where you want something to go, the type of easing (movement), and how long. Pretty easy to learn (you don’t actually need to know javascript). The animation in the example you showed me is actually even simpler to do also.