Popular Web Design Trends 2011 – Part 3

Using JavaScript and CSS techniques, web designers can create the illusion of 3-dimensional depth by animation of images in multiple layers, with parallax scrolling. The foreground images move faster than the background images, creating the 3D feel. Horizontal or vertical parallax scrolling can be used to amazing effect in single page portfolio websites, website headers, footers and other parts of the site.

Examples of 3-D feel with parallax scrolling

YessBMX  – Go on the ride of your life!

FarmhouseFare.co.uk – Gorgeous puddings and menus just inviting you right in!

Rastapenatal.com.br – This site gives the user an actual feel of the room.  On hover, the impression of depth becomes even more dramatic… down to the lights lighting up one by one.   Go right in to experience the real thing!

www.ericj.se – You see the sweedish designer biking along his website by dragging the scroll bar!

Iutopi.com – Iutopi goes deep underwater from an island!

The Beatles Rock Band

The Beatles Rock Band is a 3D game and this site invites you to be part of the act! Enter the fascinating world of the Beatles and as your mouse hovers over different layers of the site, it comes alive just like a real-life stage, backdrop and all!

www.bikingboss.com – See the mountains moving in the background as you move your mouse on the page!

Popular Web Design Trends 2011:

  1. Hand-drawn Design
  2. Mega Design Elements – Fonts, Headers & Footers
  3. Parallax 3-D Effects
  4. Mobile-friendly Websites
  5. Use of CSS3, HTML5 and jQuery 
  6. Social Networking Integration
  7. Minimalism
  8. Magazine-style Layouts

Web Design Trends – Articles & Resources