Even more professional splash by scripting Skinning - Demo 3 / 10

Introduction

This demo continues from our previous demo but this time the info box appears on top of the splash image in animated manner. This animation feature is achieved with a little bit of JavaScript coding.

Eating sushi on a Japanese Restaurant duration: 20 seconds

Happy Feet dancing in the car duration: 21 seconds

HTML/CSS coding

HTML and CSS coding is identical to the previous demo.

JavaScript coding

Here is the magic. We are using jQuery library for the animation. It dramatically simplifies our code and makes it work on all browsers. Here you can see Flowplayer's jQuery support. You can select elements from the page using jQuery selector and install the player inside those nodes. This installation returns selected elements as a jQuery object and you can continue your "normal" jQuery coding. Here we continue by adding the mouse interactivity with jQuery hover method.

// begin scripting after the page is fully loaded
$(function() {
	
	// install flowplayer and initialize mouse interactivity
	$("div.player").flowplayer("/swf/flowplayer-3.1.5.swf").hover(function() {
			
		// find div.info element inside the player container and show it
		$("div.info", this).fadeTo("slow", 0.7);
		
	}, function() {
		
		// when mouse is removed - hide the info
		$("div.info", this).fadeTo("slow", 0);
	}); 
	
	// initially all info elements are hidden
	$("div.info").css("opacity", 0);
	
});

This demo requires a little background information about JavaScript and jQuery. Highly recommended technologies for every web coder.