SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    	/*================================================================================
    	| 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •