Pure Awesomeness

Parallax Scrolling

November 18, 2011 by Greg | 0 comments

Video games often use parallax scrolling technique to create an illusion of depth by moving multiple layers of images at different speed. This technique can also be applied in web design. This post consists a list of mind blowing parallax scrolling sites, design tips, and resource tutorials. If you are considering to start a parallax scrolling site, this is a must read post.

Nike Better World

Nike Better World is probably one of the early sites who started this parallax scrolling trend. Still looking good.

 

Nike Better World

Nike Better World

 

Smart USA

As you scroll down the Smart USA site, the elements zoom to you. What is really impressive is they managed to maintain the similar look and feel in their mobile version. Most parallax scrolling designs don’t play well on mobile devices. Having a separate version is a smart idea.

 

Smart USA

Smart USA

 

Ben The Body Guard

Although the perspective seems very wrong (it doesn’t feel like a bird’s-eye view) on Ben The Body Guard, but having a character and trian runs across the scene is pretty cool.

 

Ben The Bodyguard

Ben The Bodyguard

 

Laurentius

I don’t understand Dutch, but browsing on Laurentius site was very enjoyable. You can scroll through the slideshow with mouse scroll wheel, scrollbar, navigation buttons, or arrow keys. I particularly like the slide between 4 & 5 where the butterflies flew out the scene randomly.

 

Laurentius

Laurentius

 

Mario Kart Wii

Mario Kart site gives you the same kind of experience as if you were playing on the Wii. It is fun to see the carts move on the track. Notice when you try to scroll down on the last slide or scroll up on the first slide, the graphic elements shake to create the effect of braking.

 

Mario Kart Wii

Mario Kart Wii

 

Moods of Norway

Moods of Norway truely depicts the beauty of a city line in a parallax scrolling tour. It takes you from the country side to the urban city in different lighting and season. I thought it is a travel site, but it turns they are a product site (LOL). Don’t forget to check the site on your iPhone. It displays a sweet message when you are viewing in portrait mode. You can swipe through the scenes in landscape view.

 

Moods of Norway

Moods of Norway

 

Art of Flight

Like the Mario Kart site, Art of Flight provides the same experience as if you were flying in a helicopter. It gave me a headache (in a positive way) from watching the elements flying around the scene. Very well done!

 

Art of Flight

Art of Flight

 

Smokey Bones

Beside the parallax scrolling on Smokey Bones, I like the bottom of the site where you can break the balls and play pool (well, sort of).

 

Smokey Bones

Smokey Bones

 

BeerCamp

BeerCamp doesn’t have the stunning images like most of the parallax scrolling sites, but it is very well executed. Everything is laid on the screen. As you scroll, the design zoom in layer by layer.

 

Beer Camp

Beer Camp

 

Beetle

Make sure you are on high speed connection to check the Beetle site because it is very graphic instense. The scrolling at the beginning is put together with image by image like keyframe animation.

 

Beetle

Beetle

 

New Zealand

The scene design on the New Zealand site is breath taking — beautiful and high resolution imagery. However, this beauty costs some load time and graphic resources.

 

New Zealand

New Zealand

 

Activate Drinks

Among all the sites on this list, I think Activate Drinks has the best pre-load idea. First it shows you a nice loading animation and then the cap on the bottle starts turning as you scroll.

 

Activate Drinks

Activate Drinks

 

Gidsy – Making the Perfect Listing

This “Making the Perfect Listing” page is nicely put together with just basic color and shapes. Scroll and watch the shapes merge together.

 

Gidsy - Making the Perfect Listing

Gidsy - Making the Perfect Listing

 

Things to Consider

If you are thinking to design a parallax scrolling site, here are some factors you should consider:

  • Preload the graphics: if your design is very graphic instense, preload the graphics before loading the site. This will give the user more seamless experience.
  • Mobile devices: pay extra attention to mobile devices because users might not get the same experience as the desktop browsers.
  • Viewport sizes: be sure your scene works on various viewport sizes (small, medium, large).

Tutorials

Here are some tutorials that you might find useful:

Free iPhone 4s

November 18, 2011 by Greg | 0 comments

This is for real. The folks over at Web Design Ledger are giving away an iPhone 4s and 10 copies of Steve Jobs Biography.

From Web Design Ledger:

Today we have an awesome giveaway from our friends at MightyDeals.com, a platform that offers the best deals on products and services for web professionals. Their deals are really good and highly discounted (sometimes as much as 90% off the retail price).

In this giveaway, you have the chance to win 1 of 10 great prizes, with the first prize being an iPhone 4S (the contract free unlocked model directly from Apple) – shipped to your door, as well as a copy of Steve Jobs’ biography, by Walter Isaacson.

The other 9 winners will receive a copy of Steve Jobs’ biography.

Go here for more details on how to participate in this amazing contest!

 

Here is a bit of information about the prizes:

 

iPhone 4S

 

Free iPhone 4s

Free iPhone 4s

 

iPhone 4S is quick and responsive, which makes all the difference when you’re launching apps, browsing the web, gaming, and doing just about everything.

It sports a dual core A5 chip, with all new 8MP camera and options. iOS5 and iCloud and with personal assistant Siri. Model provided is 16GB, with option to choose black or white models (pending availability).

This is the UNLOCKED model, which is free of any contracts and works on any GSM network worldwide. Includes free shipping to anywhere in the world. Worth $649. Option for the winner to choose the black or white version. Read more about iPhone 4S

Steve Jobs by Walter Isaacson

Steve Jobs Biography

Steve Jobs Biography

Based on more than forty interviews with Steve Jobs conducted over two years, as well as interviews with more than a hundred family members, friends, adversaries, competitors, and colleagues, Walter Isaacson has written a riveting story of the roller-coaster life and searingly intense personality of a creative entrepreneur.

Although Jobs cooperated with this book, he asked for no control over what was written nor even the right to read it before it was published. He put nothing off-limits. He encouraged the people he knew to speak honestly. And Jobs speaks candidly, sometimes brutally so, about the people he worked with and competed against. His friends, foes, and colleagues provide an unvarnished view of the passions, perfectionism, obsessions, artistry, devilry, and compulsion for control that shaped his approach to business and the innovative products that resulted.

Important:

  • The unlocked iPhone includes all the features of the iPhone, but without a contract commitment. You can activate and use it on the supported GSM wireless network of your choice. Please note that it will NOT work with CDMA-based carriers. If you are with a CDMA-based carrier (such as Verizon or Sprint in the US), you will have the option to receive a payment of $649.
  • iPhone and books will be sent free of charge to all winners pending availability.
  • Customs or local taxes remain the responsibility of the winners.
  • Contest void where prohibited by law.
  • Apple, Inc. is not a part of this contest or endorsing it in any way or form.