Parallax Definition and its Use in Website Design
Parallax Definition
Parallax refers to the apparent change in position of an object when viewed through two lines of sight that are different. It is measured by the semi-angle or angle of inclination between these lines of sight. An object that is nearby has a larger parallax compared to one that is far off when viewed from two different positions. This indicates that the principle of parallax can be made use of to establish distances. Astronomers put this principle to use for measuring distances to celestial bodies, including the sun, the moon and the stars outside the solar system.
Parallax Definition - an Example
To understand the phenomenon of parallax, cover one of your eyes with your hand and focus on an object. Now, remove your hand and cover the other eye. View the object with the first eye. Since the viewing angles of your eyes are different, you will feel as though the object is changing its position.
Parallax Definition: Applications
The principle of parallax can be applied to optical instruments including microscopes, binoculars and twin-reflex cameras. The visual fields of the eyes of animals, including human beings, overlap and it is the parallax effect that helps to perceive depth. Computers also make use of this effect in graphics and gaming. In three-dimensional imaging, the parallax phenomenon is employed to create the feeling of depth. The device parallax rangefinder employs this principle to determine range and, sometimes, altitude to a target.
Parallax Definition: Motion Parallax
Motion parallax is different from the parallax effect used for measurement of distance. In computer graphics, motion parallax principle provides perceptual difference in distance, motion and depth. Motion parallax is produced because of your movement. When you move, objects closer to you move faster compared to those that are far off in your field of view.
Parallax Definition: Scrolling
Parallax scrolling is a technique that is employed in computer graphics. Scrolling effect is created by improvising the motion parallax. In video game graphics, the images in the background are made to move slower than those in the foreground. This creates an illusion of depth in a two-dimensional video game.
Parallax Definition: Scrolling Methods
There are four main methods of parallax scrolling. These are as follows:
Parallax Definition - The layer method
Some systems used for display support many background layers and they can be moved independently in horizontal as well as vertical direction and at different speeds, creating motion parallax effect.
Parallax Definition - The sprite method
Programmers can also create pseudo-layers of sprites. These are moving objects that can be individually controlled. Programmers do this making use of objects drawn by hardware behind or on top of the layers.
Parallax Definition - The repeating pattern/animation method
Scrolling displays that are made up of individual tiles are moved over a background that repeats and the parallax effect is created.
Parallax Definition - The raster method
In this method, the image's lines of pixels are composited as well as refreshed in the order top-to-bottom with a small delay between drawing lines.
Parallax Definition - Three-dimensional Imaging
Three-dimensional television that does not need the use of glasses employs a filter known as parallax barrier. The filter is a series of slits on the LCD panel that allows your eyes to watch different sets of pixels. Your brain processes the pixels received by each eye's viewing angle into a single image, creating the illusion of depth. If you switch off the parallax barrier filter, you can watch pictures in two-dimensional mode.
Parallax Definition - Website Design
Parallax effect is being increasingly used in websites because of its growing popularity. It is employed in all kinds of website designs including portfolios, corporate websites and e-commerce, but mostly in websites that either convey an important message or tell a story to the Internet users.
Such websites, seemingly created by incorporating scrolling effect, are spiced up with advanced techniques like jQuery, CSS3 and HTML5 to make them sophisticated and vivid. These techniques can be employed to make even minimal website design or simple monochromatic devoid of any amazing graphics or illustrations draw the attention of Internet users.
Different approaches can be taken to create the parallax. Most websites incorporate the vertical scrolling effect, whereas horizontal scrolling often used by websites dedicated to fashion industry or photography. Mixed parallax effect is created by including both vertical and horizontal movements. Sometimes even diagonal transitions are included. However, you should consider the advantages of disadvantages of each of the approaches before using them in your website. The selection of the right approaches for your website may depend on many factors, but the power behind creating engaging and rich user experience is the seamless navigation.
Parallax Definition: jQuery Parallax Effect
In website design, jQuery parallax can be made use of to create layers that are capable of moving in tandem with the movement of the mouse. However, the speeds of the layers will be different depending on their sizes and this contributes to the illusion of depth. Using CSS, the windows may be set up to see the entire layers or alternately, you can allow them to roam about freely. jQuery parallax can be effectively styles in various ways. Viewport style is, however, the classic approach.
Parallax Definition: Advantages of jQuery
As jQuery is a JavaScript library that serves to simplify the scripting HTML on the client's side, it provides important components for user interface such as tabs, tooltips, accordions, overlays, scrollables and effects. jQuery can greatly improve the responsiveness and usability of your website, even beyond the capabilities of CSS. As a web designer, if you are already comfortable with CSS, you can get a headstart in jQuery. The jQuery tools help you to focus on creating visual appeal and presentation of information which is exactly what most website owners want.
The use of JavaScript library does not involve a steep learning curve, a lot of preliminary work or even strict coding rules. You are also not tied to any structures of CSS or HTML that are predefined. You have the freedom to incorporate the library on your web pages and immediately start using it.
Parallax Definition: Conclusion
jQuery tools are compatible with Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 9+ and Chrome 1+. You can start designing the web pages without using JavaScript and then incorporate enhancements with the help of the library. Highly professional websites do not use JavaScript for the fun of using it, but to make the pages more user-friendly and readable. Further, the possibility of combining the tools of jQuery creates endless possibilities.
