comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
Theatrical movie trailer with jQuery |
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 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 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:
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:
As you can see, we're calling a function called 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+")")); } }
One out of three functions can be called here: 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:
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? Tags: trailer jquery example proof of concept Interested in this topic? You might enjoy another article I've written called |
< Prev | Next > |
---|
Search |
---|
Or try the sitemap |