What is Parallax Scrolling? Everything You Need to Know

Parallax scrolling is a technique in computer graphics in which background images are moved relative to the virtual camera at a slower rate than the foreground image, which creates the illusion of depth in a two-dimensional scene and a sense of immersion in the virtual world. Good parallax scrolling examples are infographic quests, objects that come to life when you hover over them, or a piece of text that stays on the screen while the background in the back changes. Control of objects on a computer is usually divided between the keyboard and the mouse. On smartphones, various gestures allow you to control such a screen: clicks and swipes. A bit of history With the emergence and widespread use of HTML5 (a new standard for structuring and presenting content on the World Wide Web) and CSS3 (an improved version of the language for describing the appearance of objects), it has become possible to create more interesting and memorable design elements for all Internet pages without exception, including, of course, landing pages. Parallax scrolling in web design is a special technique used primarily in computer graphics. Its meaning is that background images in perspective move more slowly than elements in the foreground. This is not new, but is gaining popularity as a technology of modern web design. But overusing it can degrade a site's usability and lead to a drop in conversion rates. Benefits of parallax The first time you visit a parallax resource is mesmerizing. Even if the content of the landing page is not on your list of interests, you feel involved in a process that you don't want to break away from. This is also the case with visitors to the Nature Conservancy website, created to popularize the problems of water conservation on the planet. However, having experienced a surge of interest in 2014, today this fashion trend has begun to decline. Many designers have chosen to revert to more traditional web page designs, but not because they no longer like the "cool" effect. It turned out that an overly engaging and interactive landing page does not meet the expectations and habits of the target audience, and its content often remains unappreciated. To test this, Usertesting decided to test the user experience of visitors to the Nature Conservancy website, as well as the educational landing page of the British IT support service Akita, both of which use parallax scrolling on their pages. beautiful design. All subjects confirmed that, despite the shortcomings, they liked the innovative design of the tested sites: the colors, graphics, and text were perceived positively by all. Engaging content. Most of the users felt a passion for the content, and as a result, they were able to learn more about a topic that they had not previously been interested in at all. Novelty and interest. For those people who were not familiar with this kind of design, parallax scrolling seemed like a new and interesting way to present information. In their opinion, the movement on the page, sounds, and graphics helped to dilute the large blocks of text that are usually found on traditional sites. Cons Despite the presence of an obvious indicator, the "Start the journey" button or the "Scroll down" arrow, most people who found themselves on the site with a parallax effect did not know what to do. They simply didn’t notice it or ignore it, and in the end, they found the interaction with the page difficult and confusing. However, those users who immediately guessed the desired action—scrolling and moving the mouse—quickly got involved in the process and happily began their promotion on the landing page. Due to the slower loading of the page, SEO promotion is also difficult. Search engines rank sites with slow page loading poorly.