How to Make an Impressive Animated Landscape Header with jQuery

Content doesn’t always have to stay visible. Sometimes it can hide in the most unexpected locations.

In this tutorial we’ll start with a cartoon themed header, build two different states for content and animate a transition between them using jQuery.


This is going to be a big undertaking.

I’ll warn you now, there will be a lot of code to copy and paste. I will cover the essentials in the main tutorial, but in the interest of space I will not do a line by line analysis. If you’re in need of any additional help by the end, feel free to leave a question in the comments. Sound good? Let’s get going!

The Goal – Green Cartoon Hills

Before we start, let’s take a look at the end result. It’s a cartoon themed landscape with elements which slide out to reveal additional content. The screenshot below demonstrates the layout when fully expanded.

One Flashy Landscape Header

Step 1 – Get Your Files Organized

Just so we’re all on the same page throughout the tutorial, here’s a screenshot of my project file structure:

Landscape Header files

As you can see, you’ll need to make three main files for the CSS, jQuery, and XHTML respectively. We’re going to keep this as simple as possible on the file structure end.

You’ll also want to make a directory for Javascript plugins, and another for images. You can grab a ZIP file of the images used in this tutorial here.

For those interested, the RSS badge is from a tutorial on Photoshop Star, while the background starburst overlay comes from a great brush pack on myPSLink. The remaining images were drawn for this tutorial using the pen tool in Photoshop.

IE6 Disclaimer – Many of the project images above use the PNG format in order to have cleaner transparency. To keep things short, I will not be demonstrating the workaround for transparency errors in IE6. If this affects you, I recommend reading this article for a solution.

Step 2 – Bring on the Plugins

This project will make use of two different plugins along the way. You will need to download both and place them into the “js” folder under your project files.

The first is the jQuery Easing Plugin. As you’ll recall, it is responsible for making the motion in animations much smoother. In this case, for the sliding elements as they move in and out of sight.

The second is the jQuery Delay plugin by EvanBot. It allows for very easy to use time delays between functions. We’ll use it in this tutorial to coordinate and delay effects smoothly.

Step 3 – Build the Structure in XHTML

Here’s the HTML

Notice the order in which the jQuery files are being loaded. The framework library first, plugins second, and then our code last. Try to keep a similar order to avoid any conflicts. Make sure to load the CSS above the javascript!

The layout is pretty straightforward. The header contains the foreground hill image, the welcome text, and the sliding content divisions. The content area lies directly below the header, and does not have an impact on the top’s animation. In this tutorial, we’ll use it as a place to house the animation toggle switch.


Step 4 – Order and Style with CSS

Copy this code into your CSS file, and then meet me below for an explanation.

Most of the styling above handles type and spacing, but there are a few important things to note:

  1. In order to move an element using the jQuery animate() function, its position type must first be changed. I have chosen to use “relative” in this example, because it is more flexible than absolute.
  2. The varying z-index values allow us to stack elements on top of each other. A high number stacks over a lower number. In this tutorial, the foreground landscape is the front layer. Since it is a PNG and has transparency, the layers behind it will remain visible around its curves.
  3. The sliding elements are set to display:none by default, and are made visible initially by the jQuery on ready. This give the page’s foreground time to load before showing the content behind it. Otherwise, the village column may be exposed before the foreground has time to cover it.
  4. The initial starting positions for the two content columns (.village and .cloudbar) keep them off the screen. The village buildings are the only part visible by default. The jQuery is responsible for moving them between states:

Landscape Header Closed

Step 5 – Animate the Transitions with jQuery

The jQuery below will take the pieces we’ve put in place and make them work together in harmony. A detailed breakdown follows the code.

Remember that this header will have two unique states:

  1. The first will display a welcome message in the center with the landscape below. The text while fade in and out.
  2. The second state will show a raised village column and a second column hovering on the right. Both will slide in and out using easing.

The delay plugin is used stop the animation from starting until 3.5 seconds after the page loads. This lets the viewer get their bearings, and read the welcome message before experiencing the transition.

The “buildingup” boolean keeps track of when the columns are being displayed (true) or are hidden behind the hills (false). An if statement triggered by the toggle link checks for the current state, and then proceeds to show or hide as needed.

Conclusion – Show us Yours!

As nice as the village landscape is, it is a very specific design and probably won’t translate directly to very many real world applications. The important elements are the use of z-indexes to stack layers, and jQuery to show and hide expanding content with animations.

This was a lot to cover, and I’m certainly liable to have missed something. Please don’t hesitate to tell me. Let me know what would help you understand this more, and I’d be happy to help.

If you end up building any great designs using these effects, be sure to share them in the comments. You have your challenge, now let’s see what creativity comes out of it.

Posted Tuesday, February 24th, 2009 · Back to Top

SPONSOR

Add Comment

62 Comments 76 Mentions

  1. Alexis Author Editor

    The truth is that it actually looks pretty good. I’m bookmarking this one

    ·

  2. Gabe Harris Author Editor

    Cool demo! One of the biggest things I’m pushing myself to do more is to add graphic elements to my design by making them more a part of the actual page/content. I want to get better at mixing graphic elements with the content, and this tutorial is a great inspiration for that. Thanks!

    ·

  3. John Boker Author Editor

    Looks pretty good, might just need to do some png-fix’s for ie6 to display correctly.

    ·

  4. Timothy Author Editor

    As much as I don’t like jQuery, I do have to say that was very well made

    ·

  5. Raymond Selda Author Editor

    Amazing tutorial Zach! That’s all I can say. Just amazing! Thank you.

    ·

  6. Paul Author Editor

    That was a neat trick. Bookmarked your page for a later visit, thanks!

    ·

  7. M.A.Yoosuf Author Editor

    Its amazing, i loveit

    ·

  8. Ariyo Author Editor

    This is really impressive. I’m digging it.

    ·

  9. Sean Nieuwoudt Author Editor

    thanks, this is really awesome

    ·

  10. luckyu92 Author Editor

    wow! how cool

    ·

  11. Sean Author Editor

    Fresh…

    ·

  12. Taylor Author Editor

    Very cool!

    ·

  13. Samantha Meemken Author Editor

    Thanks for the helpful tutorial. Very nice!

    ·

  14. Evan Byrne Author Editor

    Really nicely done! Thanks for linking to my delay plugin!

    ·

  15. Eduardo Author Editor

    Muito bom

    ·

  16. wesley Author Editor

    Hi, first of all I would like to say I love this idea..
    I like it so much I tried to make my own version based on the landscape version.. My website will direct you to it.
    I have just one problem and I hoped that maybe you could help me, for some reason I have to doubleclick for it to work..
    Could you tell me where the problem could be, since I have no idea at all and google isnt helping very much..
    The script lies in the same path under the name script.js ..
    Thanks and once again, I like this idea very much.. very creative!
    Greetings,
    wesley

    ·

  17. Patternhead Author Editor

    Nice tut :)

    Patternhead’s last blog post..100 Free Monochrome Geometric Patterns by Martin Isaac

    ·

  18. Hutek.info Author Editor

    So kool, thank for your hard work

    Hutek.info’s last blog post..Một vài color scheme lấy ý tưởng từ bữa sáng ^^

    ·

  19. Michael Author Editor

    This is awesome. I’ll be adding this to my site soon.

    ·

  20. Shara Author Editor

    For me as a student.. It is really helpful.. :) I’m happy I searched this site for later visit…

    ·

  21. Flavia Author Editor

    Lovely! Ideas to make the same but with a pirate ship?

    Flavia’s last blog post..Momentos Divertidos en el Deporte III

    ·

  22. web design Author Editor

    Good example, how to make the default started the content with hide?

    ·

  23. Atx85 Author Editor

    Hi, I can say, just like the others. it’s really cool, but If someone want to watch this in InternetExplorer, the Explorer cry’s becasue Active-X. Is there some way to solve this problem?

    ·

    • Zach Dunn Author Editor

      @Atx85

      In my experience, that tends to be a local setting for the user. ActiveX permission come into play when Javascript is in use. Unfortunately I don’t believe you can control it, but for most avid web users it will not be problem.

      ·

  24. andres Author Editor

    Excellent!!, men, you are amazing, nice code….im follow your post from Colombia…

    ·

  25. LYKC Author Editor

    Thanks for the sharing this amazing script. I’ve utilised it for my own portfolio. Check it out at http://www.LYKC.co.uk. Kudos to you kind sir!

    ·

  26. Amy Author Editor

    Cool effect – do you know what the SEO impact of this is? Since the text is set to display:none in CSS, I figured spiders would still see it, but I want to be sure before I try implementing this anywhere.

    ·

  27. Xaby Author Editor

    Just 2 weeks ago i stumbled across jQuery and thought it is the next in thing.

    now i realised it probably already is

    ·

  28. Justin White Author Editor

    I love this! I’m only having one problem. When i test the page, in FF, and IE7/8 the cover is always at the top, and active… when i roll over it works normally, then disappears like it should. How do i get rid of the active state on page load? thanks in advance.

    ·

  29. Justin White Author Editor

    oops…disregard that last one… It was regarding a different thread.

    ·

  30. LuciferX Author Editor

    Nice effect, thank for this tuto

    ·

  31. Matt Author Editor

    I’m quite new to jQuery. I find this tutorial very informative for a beginner. I have been playing around with it to learn a little more. I am just curious is there anyway to change the background’s image? it would be neat to be able to have that drop down as well!

    ·

  32. Matt Author Editor

    sorry i meant the background image’s position

    ·

  33. alisha Author Editor

    can you use this in wordpress ?? x

    ·

  34. hanxlk Author Editor

    useful article… i need to try them one by one…

    ·

  35. Tom E Author Editor

    This is great. You rock with this tutorial

    ·

  36. Rob Author Editor

    Great effect, but with a little more thinkering you could get the content to display when JavaScript is disabled – as currently when I turn JavaScript off the content is not viewable – which isn’t ideal. For example, to avoid this, you could get the content showing as required using xhtml/css, use JavaScript to hide the areas and then animate the elements.

    ·

  37. Kim Author Editor

    Excellent!!, men, you are amazing, nice code….im follow your post from Colombia…

    ·

  38. soma Author Editor

    For me as a student.. It is really helpful.. :) I’m happy I searched this site for later visit

    ·

  39. MaXfReZa Author Editor

    A great use of this page is as a sales newsletter or followup sales message to offer an additional bonus product. I will be using it as such and hopefully you guys catch a clue cause this is an awesome example of thinking out side the box. Great Tutorial!!

    ·

  40. dz-tchat Author Editor

    Nice tuto! thanks !

    tchat

    ·

  41. Musman Author Editor

    I give you 100/100 for smothness in animation .

    ·

  42. Nguyen Duyen Author Editor

    Thank for your detailed guide.
    It helps my web better.

    ·

  43. Jason Author Editor

    The “jQuery Delay plugin by EvanBot” does not exist, what was the code in that file?

    ·

  44. Ai~ Author Editor

    Bookmarking for now, will study later. Thank you for posting such a detailed tutorial!

    ·

  45. European headlight converters Author Editor

    Thanks Zach, truly enjoyed your blog and the efforts you show through each articles!

    ·

  46. Daniel Author Editor

    Hi:
    in this moment i am renewing my website and i was looking for nice effects and i find this effect very cool. I put it in my website and it work really good. I just have a question, How can i do for the animation dont start automatically, because i want that the content is hide and if the people want to see it, click it.

    I hope you can help me, sorry for my english jeejee. greetings from Chile.

    ·

  47. Raj Author Editor

    nice.. may i use it..?

    ·

  48. IT Training Nepal Author Editor

    great tutorial and use of jquery. Thanks for sharing.

    ·

  49. Gihan Author Editor

    Nice Tutorials Zach !!!.. Very Creative !!!

    Thanks for sharing.

    Gihan
    Sri Lanka

    ·

  50. Burhan Author Editor

    Nice info,i like it… :-)

    ·

  51. MIchael Author Editor

    did i miss the link to the demo somewhere ?

    ·

  52. Brian Author Editor

    @Michael, I had a hard time finding it too – it’s at the top left under Zach’s credits

    ·

  53. Arthur Author Editor

    @Brian so was i

    ·

  54. Creative Web Design Author Editor

    Really nicely done! can u send me demo!

    ·

  55. Michele Author Editor

    Nice tutorial, I suggest updating the jquery version (it seems to work fine) and providing a full zip file with all sources, and maybe a live demo!

    ·

  56. Douglas Author Editor

    It’s a really nice demo, but it doesn’t works on Firefox… maybe I’m doing something wrong? but I copy everything from the example and it doesn’t work… :/

    ·

  57. Inspirational Quotes Author Editor

    How to Make an Impressive Animated Landscape Header with jQuery | Build Internet I was recommended this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my problem. You are incredible! Thanks! your article about How to Make an Impressive Animated Landscape Header with jQuery | Build InternetBest Regards Rolf

    ·

  58. FooniaDangeap Author Editor

    [url=http://www.saclouisvuittonspeedy.com]louis vuitton sac[/url]
    Notre soci茅t茅 est devenu sera 茅galement , mais aussi jeter une autre promotion – le sp茅cifique Amazon Appstore pour beaucoup Giveaway anniversaire Android, quel type de qui peut se donner a 脿 hommes et femmes adultes qui 芦aiment禄 le type de Page Appstore sur Facebook ou destin茅e 脿 le nouveau tirage au sort.
    ,[url=http://www.saclouisvuittonspeedy.com]sac louis vuitton speedy[/url]
    Google a pris l’initiative de dans lequel offres de vols montrent lorsque les utilisateurs faire une recherche pour envisager un voyage pour vous aider 脿 ce particulier suivante. Je dirais que le a exactement ajout茅e autres TO son algorithme de recherche de vol, y compris Amsterdam, Buenos Aires, et en plus . Ce processus signifie que lorsque les utilisateurs consulter d茅sir ces 隆隆搂 C 茫JFK AMS 隆A ces articles la meilleure qualit茅 offres de vols.
    [url=http://www.saclouisvuittonspeedy.com]sac louis vuitton solde[/url]
    amsung a annonc茅 l’ le particulier lib茅ration retard茅e vers imminente Galaxy Remarque Android Ice 4.0 Cr猫me mise 脿 jour Sandwich faire ce smartphone / tablette hybride, poussant votre position actuelle retour 脿 droite de qui de ce type de ann茅e.
    http://www.saclouisvuittonspeedy.com

    ·

  59. Jake Author Editor

    Love the tutorial! How can I add more room at the bottom for text?

    ·

  60. boxhaiphong Author Editor

    Big thanks, this is really awesome for me and….

    ·

 

Build Internet by One Mighty Roar. Since 2008.