Flash-like animations with Javascript

From Devipedia

Jump to: navigation, search

Goal

Last year a client asked for a website design which included Flash animation on the main page. As an open-source developer I don't use commercial tools to build my sites, and therefore I don't have the Adobe tools needed to build flash animations. I had used the Open-Source Flex framework in the past to create simple animations, but hadn't been terribly impressed with the approach. So I told the client that I would prefer to leave that part of the job to someone who specializes in Flash.

After hearing what the client wanted for the animation, I offered to build it using just HTML, Javascript and CSS. We agreed that at the end of the project, I would use the balance of my time to build a prototype of the animation. If we were both pleased with the result, the client would use it. If not, they would simply display a static graphic, which I also provided.

The first take was built exactly to the client's specification.

Here's the first prototype:

The animation worked quite well in Firefox and the latest version of IE. (Perhaps it was 7 at the time?) But the client felt it was boring and asked me to spice it up a little.

Here's the second version.

Since there is no way to ensure that the animation would work seamlessly between all browsers, it was our plan to gracefully degrade on older browsers, showing a static image instead on all but approved modern browsers.

Observations

Being unable to provide a one-size-fits-all animation proved reason enough to convince both the the client and myself that we should not deploy it. Still this was a fascinating exercise in Flash-free movie making. It demonstrates the potential available in modern browsers to go beyond traditional static HTML using nothing more than classic HTML elements and Javascript.

Of course this exercise also demonstrated the weaknesses of many of the current Javascript implementations. For example, the second animation often stuttered when rendered by Firefox versions available in early 2009. I'm happy to report that the rendering is much smoother using Firefox 3.5.8, so I'm assuming some improvements have been made in the last year.

Google Chrome provides, by far, the smoothest animation experience which should be no surprise since V8 is the fastest Javascript engine available today.

There is a rendering issue with IE 8 that I don't remember from one year ago. Thought the elements animate smoothly with IE 8, a hard edge is visible on the images with transparent backgrounds as they render from translucent to opaque.

These minor differences illustrate the challenge is moving from a simple movie rendering, such as is performed by Flash, to the more computationally intensive dynamic animation techniques used here.


How it was done

So what if you only care to support particular versions of modern browsers? It is possible to use this technique? Why sure!

We pull this off using:

  • CSS and absolute positioning
  • Images with transparent backgrounds
  • JQuery, JQuery, JQuery
  • HTML Div elements

The page layout for the second animation. Note that each layer div will be anchored at the same absolute position.

<body> 
<br> 
	<div id="imgcontainer" class="introducing"> 
		<div id="layer1"> 
		</div> 
		<div id="layer2"> 
		</div> 
		<div id="layer3"> 
		</div> 
		<div> 
    		<div id="introducing_bce" class="introtext">Introducing <b>Client Product</b></div> 
    		
    		
    		<div id="intro2"> 
    			With its easy to use magic potion,<br/> 
    			we put feature features on the<br/> 
    			stuff stuff stuff stuff.
    		</div>    		
    		<div id="getstarted" class="started"> 
    			Get Started with a <b>No Obligation</b> <br/>and <b>No Credit Card</b> 
    			<a href="./freetrial.html">Free Trial</a> 
    		</div>     						
    		<div id="permonth" class="functionality"> 
    			$19.99/month includes botox injection 
    		</div> 
    		<div style="clear: both"></div>    
		</div> 
	</div> 
</body> 

The CSS:


        #getstarted, #permonth, #intro2 {
    		
    		display: none;
    	} 
    		
    	.introducing div div.introtext {
        	width: 50%;
        	padding: 1em 0 0 1em;
        	position: relative;
        }
        	
    	#intro2 {
    		width: 50%;
			padding: 1em 0 0 1em;
			
		}
    
    	#imgcontainer {    		
    		background-image: url(./images/introducing_background.png);
    		width: 816px;    		
    		height: 318px;    		
    		postion: relative;
    		margin: 5em;
    	}
    	
    	#layer1 {
    		background-image: url(./images/man_layer_1.png);
    		width: 816px;
    		height: 318px;
    		position: absolute;
    		opacity: .5;
    		display: none;
    	}
    	
    	#layer2 {
    		background-image: url(./images/man_layer_2.png);
    		width: 816px;
    		height: 318px;
    		position: absolute;
    		opacity: .5;
    	}
    	
    	#layer3 {
    		background-image: url(./images/woman_layer_3.png);
    		width: 816px;
    		height: 318px;    		
    		position: absolute;
    		margin-left: 1px;
    		display: none;	
    	}

The Javascript:

    	$(function(){
    			
        		$("#layer2").css("opacity", 0);
        		$("#layer2").css("left", "-10px");
	    		
	    		$("#layer1").fadeIn(1000, function() {	
			    	$("#layer2").animate({opacity: 0.5, left: "50px"}, 600, "linear", function() {	
    			    	        $("#layer3").fadeIn(800);	
    	    		        });		
	    		});	
 
	    		
    			$("#introducing_bce").css("left","100px");
    			$("#introducing_bce").css("opacity", 0);
    			
    			$("#introducing_bce").animate({opacity: 1.0, left: 0}, 1000, "linear", function() {
	    			$("#intro2").fadeIn(900, function() {	    				
	    				$("#introducing_bce").animate({opacity: 1.0}, 1000, "linear", function() {
			    			$("#getstarted").fadeIn(800, function() {
	    						$("#introducing_bce").animate({opacity: 1.0}, 800, "linear", function(){
			    					$("#permonth").fadeIn(800);	
	    						});
	    					});	
	    				});
	    			});	
    			});
    	});
Personal tools