Websites Using the Parallax Scroll Effect//+   In Presenting their Business

35 Websites Creatively Incorporating The Parallax Effect In Their Online Presence

Parallax Scrolling | Virtual Tour Effect//+

In the field of computer graphics, filmmaking, television production, and other kinetic displays, scrolling is the sliding of text, images or video across a monitor or display. “Scrolling”, as such, does not change the layout of the text or pictures, but incrementally moves ( pans or tilts ) the user’s view across what is apparently a larger image that is not entirely seen.

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth similar to an 2D video game and adding to the immersion. There are four main methods of parallax scrolling used in titles for video game console systems.

Some display systems support multiple background layers that can be scrolled independently in horizontal and vertical directions and composited on one another. On such a display system, a game can produce parallax by simply changing each layer’s position by a different amount in the same direction.

Programmers may also make pseudo-layers of sprites—individually controllable moving objects drawn by hardware on top of or behind the layers—if they are available on the display system. In raster graphics, the lines of pixels in an image are typically composited and refreshed in top-to-bottom order with a slight delay ( called the horizontal blanking interval ) between drawing one line and drawing the next line.

Plain text is essentially linear, it does not have a 2D structure. For text in most scripts ( with line-by-line ordering of characters on horizontal lines, as opposed tovertical writing ), horizontal scrolling is much more inconvenient than vertical scrolling, because when reading the text in order, back-and-forth scrolling is needed for every line, as opposed to vertical scrolling, which is needed only after reading a whole window or column of text.

The Parallax Scroll effect is simply utilized in displaying multiple background layers that can be scrolled independently and horizontally and vertical directions.This amazing effect was approached in the beginning of 2011 by Nike in their Nike Better World project, and since then, everyone has been incorporating it in creating some truly amazing effects.

 

Similar effects can be created on a web page by fixing semi-transparent background images to different sides of the browser viewport, and at different horizontal percentage positions. In addition to this, blurring some of those images will emulate focus and depth-of-field. The effect can only be seen as the browser window is resized, but the subtlety of this effect is quite pleasing to the eye and — not everyone will notice it and it will not happen in IE6 ( sorry ! ) .

The use of  javascript can be used in forcing the browser to display transparent PNGs, although its not suitable for this effect. One could use alpha-transparent GIFs instead, but the lack of anti-aliasing will end up looking terrible. The best approach would be : to think about your target audience and the browsers they will likely be using , show this effect to those with Safari, Firefox, Opera, or IE7 and use conditional comments to override it in IE6. Most likely, IE6 users will just see a flat background image and are none the wiser.

At the present time, if one desires in creating a 3D effect on their web site they wouldnt need to incorporate the use of Flash and video. The inception of parallax scrolling in web design is a  technique which features layered images that can be scrolled ( tilted or panned ) around a website at different speeds/perspectives , thus creating a nice and interesting 3D illusion.

Initially it was used for creating an illusion of depth in 2D video games and adding to the immersion, but since, the emergence of well defined imagery, JQuery and CSS3, it can be useful in making your site more vivid and creative.

This showcase presents 35 websites which use the Parallax Scroll effect in presenting their business, and 35 Creative approaches that will make your eyes drool from all the eye candy featured below.

Enjoy

 

 

1. Siebennull

Siebennull
 
Check Here
 
 

2. Bagigia

Bagigia_Parallax
 
Check Here
 
 

3. Friendlygents

Friendlygents_Parallax
 
Check Here
 
 

4. Atlantis World’s Fair

atlantis-world's-fair_Parallax
 
Check Here
 
 

5. Nike Better World

Nike Better World
 
Check Here
 
 

6. Whiteboard

White Board
 
Check Here
 
 

6. IWC Shaffhausen

iwc-shaffhausen
 
Check Here
 
 

7. Playtend

palytend
 
Check Here
 
 

8. Improving Speed

Improving Speed
 
Check Here
 
 

9. New Zealand

New Zealand
 
Check Here
 
 

10. Cultural Solutions

Cultural Solutions
 
Check Here
 
 

11. Tokio Lab

Tokio Lab
 
Check Here
 
 

12. Moods of Norway

Moods of Norway
 
Check Here
 
 

13. Cheese Please

Chease Please
 
Check Here
 
 

14. Ben the Bodyguard

Ben the Bodyguard
 
Check Here
 
 

15. Marcus Thomas

Marcus Thomas
 
Check Here
 
 

16. Laurentius

Laurentius
 
Check Here
 
 

17. Krystalrae

Krystalrae
 
Check Here
 

18. Smokey Bones

smokey-bones
 
Check Here
 

19. Air Jordan

Air Jordan
 
Check Here
 

20. Jan Ploch

Jan Ploch
 
Check Here
 

21. Q Music Titanic

Q Music Titanic
 
Check Here
 
 

22. Web is Beautiful

Web is Beautiful
 
Check Here
 
 

23. No Leath

No Leath
 
Check Here
 
 

24. Manufacture d’essai

manufacture-dessai
 
Check Here
 
 

25. Putzengel

Putzengel
 
Check Here
 
 

26. UFO.it

UFO.it
 
Check Here
 
 

26. Fishy

Fishy
 
Check Here
 
 

27. Octavo Designs

Octavo Design
 
Check Here
 
 

28. Tokyu Agency Recruit 2013

Tokyu Agency Recruit 2013
 
Check Here
 
 

29. Bengston & Bengston

Bengston & Bengston
 
Check Here
 
 

30. Soleil Noir

Soleil Noir
 
Check Here
 
 

31. Tiny Big Studio

Tiny Big Studio
 
Check Here
 
 

32. Ok Studio

Ok Studio
 
Check Here
 
 

33. 360 Long Road Zurich

360 Long Road Zurich
 
Check Here
 
 

34. Ito Sio Ceni

Ito Sio Ceni
 
Check Here
 
 

35. Reverend Danger

Reverend Danger
 
Check Here
 
 

Parallax Scrolling Tutorial

For a great Parallax Scrolling Tutorial on incorporating some great visual effects on your own websites please check out the following Tutorial Here

 

Like This Post ♥

  6 Like

Written by SkyTech

I hold a Masters in Computer Application Degree, addicted to gadgets, technology and web design.

Comments

2 Comments on "35 Websites Creatively Incorporating The Parallax Effect In Their Online Presence"

  1. Great post.Learn lot from it and many thanks for sharing Parallax Scrolling Tutorial link.

  2. Thank you for including us!


Here's your chance to leave a comment!

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