Flash Tutorials
& Resources
Fireworks &
Illustrator Tutorials
Web Design
Tutorials & Resources
You are here : : Home > Free Resources > Web Design Trends 2011 - 3D Feel With Parallax Scrolling   

3D Feel With Parallax Scrolling

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!


This page is a part of our series on Popular Web Design Trends 2011 which include hand-drawn design, mega design elements, parallax 3-D effects, mobile-friendly websites, use of CSS3, HTML5 and jQuery, social networking integration, minimalism, magazine-style layouts.

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.

Related Articles, Tips & Ideas

Cool Website Menu Ideas

Logo Design Ideas

Brochure Design Tips

Text Ideas in Design

Logo Design Tips