Theatrical movie trailer with jQuery

Placed in: Home

Don't you wonder sometimes, when looking at something, how you can create something like that yourself? I have to admit that I do. This is why I came up with the Skype for Mac and the iPhone examples in your webbrowser. Today, we're trying something new in this Proof of Concept category: creating a theatrical movie trailer with jQuery

This technique could be really well used when creating a slide-show that just needs some text. Using the CSS letter-spacing property, we can really make it look like the movies.

I'll leave out the CSS in this tutorial, since not much really important stuff is going on there. This example works best in Firefox - Although it works in Safari and Opera too, the letter-spacing CSS property gets rounded up (or down) and you won't be able to see the full effect. Also, you'll need to imagine the sound effects yourself.

HTML

First, we'll need to give the page a backbone - the HTML. This is the structure that we're going to use in this tutorial.

 
<div id="theater">
      <div id="movieoverlay">
         <img src="images/play.png" alt="Play" class="playbutton" />
         <div id="overlaybg"></div>
      </div>
         
      <div class="preview prevtext">
         <p>In a world,<br />where fruits dominate the earth</p>
      </div>
      
      <div class="preview previmgwide">
         <img src="images/preview_01.jpg" alt="Preview 01" />
      </div>
 
      <div class="preview previmgheight">
         <img src="images/preview_02.jpg" alt="Preview 02" />
      </div>
</div>

Here's how it's going to work:

#movieoverlay - This is the starting screen - the overlay with the "play"-button.
.preview - Every preview element has this class applied. It's needed for CSS and jQuery to know that each of this divisions is a preview.
.prevtext - Another class that can be applied, is the prevtext class. We'll need this in jQuery to know that the division contains text that can be animated.
.previmgwide - A wide preview image contains this class. jQuery will animate the image from left to right.
.previmgheight - A high preview image contains this class. jQuery will animate the image from top to bottom.

The CSS file isn't that spectecular (just view the source yourself), so I suggest that we'll continue directly with the jQuery.

JavaScript

 
/* Time to preview a preview */
var PREVIEWTIME = 3000;
 
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
   // Set the opacity for the movie overlay (start screen)
   $("#overlaybg").fadeTo(0, 0.1);
   
   $("#movieoverlay").click(function(){
      $(this).fadeOut(function(){
         setTimeout("animatePreviews()", 500);   
      });   
   });
});
 
/* Variable to store which preview is currently viewed */
var currentPreview = -1;

This is what happens in the above piece of code:

PREVIEWTIME - A global variable that you can set to set the preview time on how long the animation of each preview should be.
$(this).fadeOut - Once the #movieoverlay has been clicked, it fades out. Using setTimeout, we can delay calling the animatePreviews function, that we'll create later.
currentPreview - A variable we need to remember which preview we are currently viewing. It's set to -1, since we'll increase it later. The eq-selector is 0-based, so when 1 is added to currentPreview, it'll give is 0; the first Preview element.

As you can see, we're calling a function called animatePreviews. Here's how this function looks like:

 
function animatePreviews() {
   currentPreview++;
   
   if( $(".preview:eq("+currentPreview+")").hasClass("prevtext") ) {
      animateTextPreview($(".preview:eq("+currentPreview+")"));
   } else if ( $(".preview:eq("+currentPreview+")").hasClass("previmgheight") ) {
      animateImagePreviewHeight($(".preview:eq("+currentPreview+")"));
   } else { 
      animateImagePreviewWide($(".preview:eq("+currentPreview+")"));
   }
}

currentPreview++ - Every time this function is called, 1 is added to the currentPreview variable. This way, we'll now which preview we're currently showing.
if (...) { } - The big if/elese statement simply checks which class the preview element has applied. If it's a text (prevtext), we'll call the function animateTextPreview and giving the element as an argument to the function.

One out of three functions can be called here: animateTextPreview, animateImagePreviewHeight and animateImagePreviewWide. This is how they look like:

 
function animateTextPreview(previewElement) {
   $(previewElement)
      .fadeIn("slow")
      .animate({
         letterSpacing : "3px"
      }, PREVIEWTIME)
      .fadeOut("slow", function(){
         animatePreviews();
      });
}
 
function animateImagePreviewWide(previewElement) {
   $(previewElement)
      .fadeIn("slow")
      .animate({ marginLeft : "-100px"} , PREVIEWTIME)
      .fadeOut("slow", function(){
         animatePreviews();
      });
}
 
function animateImagePreviewHeight(previewElement) {
   $(previewElement)
      .fadeIn("slow")
      .animate({ marginTop : "-100px"} , PREVIEWTIME)
      .fadeOut("slow", function(){
         animatePreviews();
      });
}

Explanation:

previewElement - Every function expects a previewElement that it can animate.
.fadeIn - First, the preview element is faded in.
.animate - Next, the preview element is animated. This is where the functions differ - The text gets another letter-spacing and the images are moving.
.fadeOut - Last, the preview element is faded out.
animatePreviews() - Once the element is faded out, it get's a callback to the animatePreview() function. This creates a loop to handle all the preview element.

And that's all we need to create a movie trailer using jQuery!

Conclusion and Download

Although this effect isn't that useful, I do think it's pretty nice to see to display text and images. Instead of calling three different functions to animate the element, one function would be enough too (with an if/else over there). But looking back, it's pretty cool to see!

If you see any space to improve the code even more, be my guest! Do you think you could use this in one of your next projects?

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New

RSS

Gaya	2009-09-21 17:58:19

Very cool!
We now need to kill those flash headers and implement this.
A bit choppy though (slower PC + Firefox).
Might be using something like this in the future. I see possibilities.