New Portfolio Design Tutorial 2: The Animation

December 22, 2009 Tutorials

In part two of the new portfolio design tutorials, you will learn how to recreate the animations used to transition between pages. Again, the entire site is on one page, in separate divs. They are broken up into different “pages” with jQuery. jQuery also takes care of the animations between page changes. To view the animation that we will be recreating, visit my portfolio and navigate between the pages. If you have never used jQuery before, don’t be intimidated. Once you start to play around with jQuery and become more familiar with it, you will want to use it more and more in your projects. For those of you who don’t know, jQuery is a free, compact JavaScript library that enhances your website in many different ways. jQuery itself is like a foundation, needed for any jQuery project, but the magic happens with the plugins. These plugins are written by the community, and released free to everyone. The jQuery community is very large, and there are thousands of plugins across the web. Many of the plugins can be found on the official jQuery website. In addition to the variety of plugins, there are tons of tutorials on how to use jQuery out there. A great jQuery tutorial resource is jQuery for Designers, run by Remy Sharp. The site is geared towards designers who don’t know everything about developing, but is a helpful resource to anyone interested in jQuery. I used one of Remy’s tutorials to replicate the animation for my site.

The Tutorial

The tutorial jQuery look: Tim Van Damme gave me a great foundation for what I wanted to accomplish on my website. There were just a few tweaks that I need to make to have it work smoothly for my website. To focus on just the animation part of the tutorial, navigate to the beginning of the “Accordion bounce” section. Follow the rest of Remy’s tutorial to accomplish all of the animation effects. There were some problems in Internet Explorer for me because of my container’s transparent background. To solve this, I removed the following line in the jQuery script:

// (4) If the browser supports opacity, fade the panels out
  if ($.support.opacity) {
    $panels.stop().animate({opacity: 0 }, delay);

That’s it

Now you should have a nice animated site courtesy of jQuery and jQuery for Designers. Stay tuned for the next tutorial in the series that will teach you how to design the buttons used in “Connect With Me” section of my portfolio.

Related Articles