Optical illusions are one of the favorite moves of designers and artists. They help to attract attention both to the design of the room, the image in the picture, and to the content of the site, to diversify the interface on any device. Today we will tell you about one such trick called the parallax effect. Let's start with its definition.
What is parallax?
Parallax (Greek παραλλάξ - "alternation", "change of something") - this is the name of the change in the apparent position of the object in relation to the distant background, depending on the location of the observer.
It is on this phenomenon that binocular vision is based - the ability to clearly distinguish one image, while looking with two eyes. In astronomy and geodesy, the parallax effect is used to measure distances to distant objects.
Concept in astronomy
Here the following varieties of the hero of our story are distinguished:
- Geocentric (daily) - the difference in directions to the same astronomical object from a certain point on the surface of our planet (topocentric vector) and from the center of mass (geocentric vector).
- Annual - changes in directions to an astronomical object associated with the rotation of our Earth around the Sun.
- Century-old - a change in the apparent position of an astronomical object on the celestial sphere due to a combination of its own rotations and the movement of the solar system within the galaxy.
In the photo
Consider the parallax effect in photography. Here he also occurs of several types:
- Viewfinder parallax - the image that the photographer sees in the non-mirror optical viewfinder does not coincide with what happens in the photo itself. Often this manifests itself when shooting close-range objects.
- Rangefinder Parallax - the angle at which the desired object is visible during focusing (performed using the optical rangefinder).
- Binocular (stereoscopic) parallax is the angle at which an object is photographed with a stereoscopic photo device. Similar to binocular vision.
- Temporal parallax - distortion of the shape of an object with this effect, which manifests itself when shooting with a camera having a curtain shutter. Visible when capturing something moving fast. If the object holds the path towards the shutter slit, then it will be stretched, otherwise, on the contrary.
In web design
Here, the parallax effect (in another way - parallax scrolling) is a special technique in which the background in the future moves slower than the main plan. The last one is text, image.
How to make parallax effect? 3D space is created with the help of several backgrounds, which, when scrolled, begin to move at different speeds. It looks quite spectacular and impressive.
Consider the programs and applications in which you can create the parallax effect:
- jQuery is a plugin that binds parallax scrolling to the user's rotation of the mouse wheel.
- jParallax - can turn web page elements into absolutely positioned layers that will respond to the cursor location.
- Scrolldeck is a convenient plugin that allows you to achieve this effect.
Web Design Features
We draw your attention to the fact that the parallax effect is not a universal decoration for all sites. The first resource on which it could be seen was the site of Nike Corporation. And until now, it is pretty good for online stores, helping to revitalize the display of assortment, movement by category. But within reasonable limits - the user still wants to look faster and choose what he needs, so the saturation of the effect will soon begin to annoy him.
Controversial will be its use for business, information resources. On the one hand, parallax allows you to somehow break a solid text into blocks, on the other hand, it looks a little frivolous. Ideal would be its application for children's, entertainment, educational resources, biography sites, it will help to give recognition, originality, and attract attention.
Disadvantages of parallax scrolling and ways to eliminate them
Parallax is a pretty and stylish effect. However, it noticeably makes the page heavier due to the use of javascript / jQuery: they have to perform a number of complex calculations to control the position of each pixel. This is quite noticeably slows down the speed of loading the site. Cross-platform and cross-browser issues may also occur.
The solution will be to not especially reload the site with parallax effect elements, 1-2 on one page is enough. Another way is to use CSS3. It helps to create a very similar effect, which is less resource-intensive. But it has its drawbacks: it is impossible to achieve parallax scrolling only with its help. In addition, not all modern browsers support CSS3.
Web Design Examples
Understanding what the parallax effect is will help you become familiar with some of its incarnations in web design:
- Portfolio of photos that responds to mouse movements.
- Scroll effect - to open an ad, an article, you need to pull the arrow in the image.
- When scrolling through the list, the background moves slower than the text.
- Some objects (clouds, toys, figures, garments) are moving around the page.
- Reacting to your movements with the mouse, the background layers move apart.
- One part of the page is sensitive to the location of the cursor, and the second is motionless.
- Moving the mouse, you can launch a rocket into space, a car, a man, etc. The effect is achieved by the fact that the background moves slowly, and the main object - quickly.
The interface of various operating systems also uses such an illusion. In particular, for iOS 7, the parallax effect was already characteristic.
Thus, the object of our story is relevant in many areas. Recently, he has firmly established himself in web design, which, however, does not guarantee its universal charms for all sites.