WooCamp 2014 Invite – Parallax Website

Design, Illustration, Invitations, New Piece, Web Design

WooCamp2014 Header w Background

I did it! I’ve made a parallax site. For anyone who hasn’t noticed, parallax has exploded in the last year (or less?). It is such a wonderful way to create layers, animation, and add a sense of depth to a web experience. I have just barely touched the tip of the iceberg with what I’ve created here – the potential to add even more transitions and animations to a parallax site are boundless.

I was excited to experiment with this new technology with my long-standing client, that being the annual WooCamp invite. I’ve created 4 of them so far, alternating between print and web based invites. The event lends itself to themes of adventure, exploration, wilderness, and camaraderie, and this year, inspired also by my client’s recent trips to Antarctica, Patagonia, Everest, K2 (the list goes on), I settled on “Victorian Adventurer” for the invite’s theme. (Previous incarnations have been National Parks, Wild West, and something akin to Summer Camp).

I started with some fancy Victorian lettering, pulling inspiration from a Pinterest board I created that is full of Victorian/Explorer images. I also not-so-secretly admire Jessica Hische and all her beautiful lettering projects, and wanted to take a stab at one myself, and this seemed like the perfect opportunity. I also created a “ticket” that could be used for email, directing invitees to the website, which was another Victorian travel inspired piece.

Web

In addition to some fun side graphics I created that illustrated the events of the weekend, I had to include in there somewhere an homage to the phrase, “Livingstone, I presume.” I mean, I had to.

Portrait Template

My first iteration of the Livingstone portrait – I took my client’s face and photoshopped it into a portrait of Henry Morgan. I thought initially I might be able to make little Livingstone-esque portraits for all the attendees as part of their invitation, but realized I simply didn’t have enough time to do that.

Drawing inspiration once again from my Victorian source material, I wanted to include images or maps of the area. The beautiful botanical drawings that came from that era have such a wonderful tone and saturation about them that I wanted to emulate. Tempted initially to bust out water colors and paint up some background images, I instead came across a wealth of photos I had taken while I was at WooCamp one year. Taken when the sun was setting, the colors were ripe and with a few tweaks and filters I feel like I captured the essence of the place, while also playing along with the theme I had established, and created images that had a painted quality about them.

So the background parallax effect I borrowed the general look from this site tutorial. But I really wanted the background images to move slightly, so had to add that code in. Additionally, I wanted to include some more graphics that could tie into the “what to do/what to bring” section, so created another animation speed for those objects so they would appear to “fly up” the screen at a faster rate than the regular scroll. Kind of like how things scroll up the sides of a Pixar animations credits.

WooCamp2014-Screen-Cap

Here’s a little animated gif of the animation speeds. Probably better to just look at the site though, so you can scroll at your own pace (here’s the site).

The potatoes are my favorite.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s