Beautiful and Successful Parallax Scrolling Website Designs

Beautiful and Successful Parallax Scrolling Website Designs

Beautiful and Successful Parallax Scrolling Website Designs

Video games often use parallax scrollingtechnique 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.

Do you need a website built? Do you need a beautifully designed website?

We build and design all our websites on the wordpress CMS.

Contact us for a web design quote!

Nike Better World

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

 

nike better world1 Beautiful and Successful Parallax Scrolling Website Designs

 

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 usa1 Beautiful and Successful Parallax Scrolling Website Designs

 

Ben The Body Guard

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

 

ben the body guard1 Beautiful and Successful Parallax Scrolling Website Designs

 

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.

 

laurentiuswonen1 Beautiful and Successful Parallax Scrolling Website Designs

 

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 kart1 Beautiful and Successful Parallax Scrolling Website Designs

 

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 norway1 Beautiful and Successful Parallax Scrolling Website Designs

 

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 flight1 Beautiful and Successful Parallax Scrolling Website Designs

 

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 bone1 Beautiful and Successful Parallax Scrolling Website Designs

 

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 camp1 Beautiful and Successful Parallax Scrolling Website Designs

 

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.

 

beetle1 Beautiful and Successful Parallax Scrolling Website Designs

 

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 zealand11 Beautiful and Successful Parallax Scrolling Website Designs

 

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.

 

active drinks1 Beautiful and Successful Parallax Scrolling Website Designs

 

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.

 

making better listing1 Beautiful and Successful Parallax Scrolling Website Designs

 

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:


About the Author


Sweetmag. We build creative and effective web solutions.