Logo

WEB THINGS | domclaxton

  • Archive
  • RSS
  • Ask me anything

SCROLLALAX! - A Top-Down Twist On Parallax Scrolling Site Design

Parallax scrolling example

Parallax love

This popular web design trend of 2011 for scrolling ‘parallax’ websites continues unabated. I’ve included the nine that I referred to in my previous post and also a load more. Click the read more, to view. Check back here often because I will use this post to ‘bookmark’ other site examples that I think are worth recording. Really good ones might get their own posts!

If you are interested in producing your own twist on the ‘parallax’ phenomenon you can use the code found here…

Tutorials

Here are some tutorials that you might find useful:

  • Recreate NikeBetterWorld Parallax
  • Behind the Scenes of NikeBetterWorld
  • Building Parallax Scrolling Storytelling Framework
  • Parallax Scrolling jQuery Plugin
  • jParallax Plugin
  • Design float 
  • Smashing magazine - vanilla site



Here are the live site examples - they get more ambitious as you move through each example:

Conka3DCONKA3D 

Yess BMX site

YESS BMX

Sketch travelSKETCHTRAVEL

Smokey Bones site

SMOKEY BONES -Nice bold images and impactive text take this everyday serving of fast food to a different level

Sony siteSONY

Up! siteVOLKSWAGEN-UP! - A twist on the usual navigation. Instead of scrolling down, you scroll UP! A nice example of taking an existing navigational device and turning it on its head.


Morebros siteMORE BROS

Activate Drinks site

ACTIVATE DRINKS - The water motif plunges you deeper into the site as you learn more about this thirst quenching product.


screenshot

NIKE BETTER WORLD

screenshot

SMART USA - Elements popping in and out as you ‘scroll’ through.

screenshot

MARIO KART - Takes the whole concept of scrolling to a whole different level with the scroll bar taking you on a diagonal whirl-wind tour of the site. This works well with the Video game aesthetic of the site.

screenshot

THE ART OF FLIGHT - Topsy-Turvey, Inny-Outy. This site might give you a funny feeling as you navigate. It shows off to good effect why FLASH has been threatened so much by HTML5 and javaScript.

screenshot

2011 BEER CAMP - This site is not using parallax scrolling in the traditional sense as you navigate the 3D text using the scrollbar

    • #HTML5
    • #Parallax
    • #Scrollalax
    • #Web design
    • #jquery
    • #scrolling sites
  • Dominic Claxton 1 year ago
  • 9
  • Permalink
  • Share
    Tweet

9 Notes/ Hide

  1. lesleeok09 likes this
  2. lakelander likes this
  3. domclaxton posted this
← Previous • Next →
  • Home
  • Digital cogitation
  • Design influence
  • Developer developments
  • Kinetic typography
  • About me
Avatar My name is Dominic Claxton I discover, assimilate, cogitate and regurgitate creative developments I consider influential and worth talking about

Find me here too...

  • Portfolio
  • domclaxton on Dribbble
  • @domclaxton on Twitter
  • Google
  • Linkedin Profile
  • Scoop.it

Twitter (latest post)

loading tweets…

  • RSS
  • Random
  • Archive
  • Ask me anything
  • Mobile

Copyright Dominic Claxton 2012.