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

• jQuery quickie: Slot machine navigation
• jQuery quickie: Unlimited Scroll using the Twitter API
• jQuery quickie: Colourful rating system with CSS3
• jHTML-Ipsum: HTML Ipsum using a jQuery plugin
• Advanced jQuery background image slideshow

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 Search 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. Reply | Quote

Yoosuf   2009-09-22 08:48:05 I am agree with you Gaya!, flash headers are really annoying! Reply | Quote

Yoosuf - Amazing Work   2009-09-22 08:46:42 Seriously nice work, I am amazed and I am thinking of implementing for my next project. Keep it up such cool work! Reply | Quote

Marco - Thanks a lot!   2009-09-22 14:11:36 Thanks a lot Yoosuf - glad you liked it. Hope to see this stuff more and more online - good luck! Reply | Quote

walter - Great   2009-09-22 18:04:52 Very promising. when watching the demo, the text animation seems a step-by-step animation... maybe it's firefox in my mac good work! Reply | Quote

Marco   2009-09-22 20:05:34 Thanks for the comment Walter! But strange that you say it looks like a "step-by-step" animation on Firefox. My FF on Mac (v3.5) is the only one that does display it non-'step-by-step'. Opera (9) and Safari (3.1) do display it "step-by-step". Reply | Quote

Nick Lewis - Smoothing text   2009-09-22 18:28:18 It doesn't totally solve the issue, but if you lower the font size to something like 18px the growing animation is smoother. Though in all reality you would want that text to be a straight image if your going to grow it. Reply | Quote

Marco - Thanks   2009-09-22 20:07:44 Thanks a lot for helping me (and others) improve the code Nick! There indeed is loads of space where this Proof of Concept could be improved, so be my guest. Just remember to "think outside the box" Reply | Quote

Josh L - Bravo!   2009-09-22 23:57:14 Best jQuery demo ever. Reply | Quote

Featherstone   2009-09-25 18:26:01 Right on. Your site is an inspiration to those of us on the brink of web programming greatness, and real asset and eye-opener to all. Thanks for this awesome post. Reply | Quote

Anonymous - Histerical Great Thing   2009-10-01 02:56:49 Maannn !!! This is awesome... is anyone exited as me ? Great... Thank you Retweeted ! Reply | Quote

Frankie - movietrailer "player"   2009-10-15 12:26:08 Very nice ! Do you think this "player" could work with a converted version of mediabox advanced (http://iaian7.com/webcode/mediaboxAdvanced) ? mediabox Advanced is using mootools 1.2.3. mediabox Advanced as jquery version with your "player" style would be nice. Greetings, Frank Reply | Quote

Anirudh K. Mahant - WHERE CAN I SEE THE TEASER OF THIS MOVIE LOL   2010-01-23 12:45:56 WHERE CAN I SEE THE TEASER OF THIS MOVIE LOL! Cool very very cool concept... Carrots Vs Fruits starring Keanu Reeves and Paris Hilton BIG LOL! Reply | Quote

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge

Unsubscribe from e-mail notifications.