This is a message.

Awesome splashes with Javascript

Make your splash images animated and interactive

Play this video
Eating sushi on a Japanese Restaurant duration: 20 seconds
Play this video
Happy Feet dancing in the car duration: 21 seconds

standalone demo

This demo is based on our previous demo and adds some more jazz into it. This time the info box appears on top of the splash image with an animation. This animation is achieved with a little bit of JavaScript code.

HTML

The HTML and CSS code is identical to the previous demo.

Javascript

Here is the magic. We are using the jQuery library for the animation. It dramatically simplifies our code and makes it work on all browsers. This also demonstrates Flowplayer's jQuery support. You can select elements from the page using a jQuery selector and install the player inside the selected nodes. The selector returns selected elements as a jQuery object and you can use it like any other jQuery object. This demo adds mouse interactivity using the jQuery hover method.

// install flowplayer and initialize mouse interactivity
$("div.player").flowplayer("http://releases.flowplayer.org/swf/flowplayer-3.2.18.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);

JavaScript