04 Mar 2011

Vertical Parallax – A new trend in webdesign

vertical-parallax-webdesign

Parallax based webdesign was already a trend for the past few years, but it looks like vertical parallax is going to be the next big thing. Unlike the typical horizontal parallax, the movement happens as you scroll the page. The following is a list of creative websites that has marked the beginning of this trend. I’m expecting to see more of this in 2011.

Vertillax a premium vertical parallax based wordpress theme. Create your own parallax website in minutes!
parallax_wordpress_theme

Ben the bodyguard This is almost like watching a short film ;)
vertical parallax effect

Nike better world You’d be already familiar with this.
Nike parallax webdesign

TEDx Portland A unique use of the parallax effect.TEDx vertical parallax

ResolutionIM Don’t take your eyes off the rocket as you scroll.
Rocket Parallax

David Beckham

Manufacturedessai

APO
vertical scroll

Tutorial to create a vertical parallax using CSS and jQuery

And finally, an awesome detailed tutorial explaining how to create a vertical parallax using jQuery and CSS.
Vertical parallax using jQuery and CSS

About Gopal Raju

Gopal Raju is a passionate designer, developer and blogger from India. He’s the founder of Convax Solutions, a web design and development agency in India. Catch up with him on dribbble, Twitter and Facebook.

Related posts

wireframes_webdesign

Wireframes- What makes them a key component of every web design project?
colors-call-to-action

Top Colors for Call-to-Action Buttons
horizillax_horizillax_wordpress_theme

Horizillax – Horizontal Parallax WordPress Theme
Share

16 Responses to Vertical Parallax – A new trend in webdesign

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. md.hasan January 4, 2013 11:44 am

    parallax based web design really biggest things.very informative and useful side its.thanks a lot

    Reply
  2. Curtiss October 21, 2011 3:53 pm

    Jon Raasch created a great jQuery plugin to enable vertical parallax scrolling: http://jonraasch.com/blog/scrolling-parallax-jquery-plugin. Also here is a great example of a site using his plugin for a gorgeous effect. http://www.funsies.com

    Reply
  3. Liekens Benjamin September 3, 2011 11:38 am

    Hello colleagues,

    Beautiful website and beautiful pictures

    Good luck, it is a professional website.

    Greetings from Belgium

    Reply
  5. Vladimir May 20, 2011 8:38 pm

    Wow!
    These are nice examples of vertical scrolling…
    Thanks for sharing :)

    Reply
  6. Brett Widmann May 6, 2011 4:06 pm

    These are some interesting trends. Thank you!

    Reply
  8. DF April 20, 2011 7:46 am

    Ben the Bodyguard is nominated in two categories at the webbys awards this year, to me its worth to give a vote.
    http://goo.gl/yHbqf

    Reply
  10. jp March 11, 2011 3:38 pm

    hey friends, thanks for featuring our tutorial :) feel free to link to our other tuts :)

    Reply
  11. anonymouse March 7, 2011 6:18 am

    I don’t think Parallax is the right name for this

    Reply
  12. Adham Dannaway March 6, 2011 6:26 pm

    I guess people like to scroll these days. I especially like APO’s website design. Although it’s not that simple to understand I think it’s pretty fun to browse the website. Let’s see if this vertical trend continues… ;-)

    Reply
  13. Neil Berry March 4, 2011 7:24 am

    Love this effect, check this demo out too

    http://www.davidbeckham7.co.uk

    Reply