THE STUDY OF TECHNOLOGY CREATE A PARALLAX EFFECT WITH THE HELP OF A WEB BROWSER
Initially, the world wide web was developed to store and retrieve data in the form of documents, but with the development of technologies such as HTML markup language and CSS style sheets, it became possible to create stylistically unique documents. The developer was no longer limited to one typeface, could use a huge number of colors and add images to your material. And after a while there was a possibility of visualization and three-dimensional graphics (3D) in the browser window.
Urgency. This research work is devoted to the research of parallax effect creation technologies on the web-site pages. Using this effect attracts the user’s attention and allows you to visually improve the perception of the page, the presentation of the product or service in the case of corporate solutions.
In the process of studying and processing the materials used the following research methods: methods of comparative analysis, grouping of information, synthesis of information.
Parallax-scrolling (eng. Parallax Scrolling) is a technique that creates a sense of depth through differences in the animation of multiple layers of an image on the screen (figure 1). It allows web users to perceive various audiovisual images through simple operations such as scrolling or dragging with the mouse.
Figure 1 – Principle of the parallax effect
While standard videos can be viewed or skipped by the user, the parallax scrolling method interactively reproduces some images, which significantly improves the perception of information (figure 2).
Figure 2 – Example of the operation of the parallax effect
The interactivity of this method ensures the involvement of a third-party viewer in the process, supports feedback. On the other hand, parallax scrolling can cause discomfort in the process of physical interaction with users, preventing the assimilation of information due to the imperfection of the playback mechanism. In this regard, there is a need for more research on ways to improve and develop optimized scrolling techniques.
How to create parallax on a web page
1. jQuery Parallax
The General algorithm for implementing the parallax effect when using jQuery is as follows: one or more external containers are used as the background, each with its own background and personal id. Next, you need to write a handler function that calculates the coordinates of the scroll bar when called and based on this data shifts the background elements by a certain amount multiplied by the corresponding coefficient. This handler function must be attached to the scroll event, thus achieving the parallax effect. This is what a handler function might look like:
var scrolled = $(window).scrollTop();
a) Position + top, left
There are two main ways to control the coordinates of an item on a web page. The first is a combination of the position and top / left properties. The first is responsible for the way the element is positioned on the page, the second — for the shift of the element. Relatively what this shift is made depends on the value of position.
(b) Transform: translate(x, y)
The translate(x, y) property is responsible for changing the position of the element relative to its initial position. Although its function is generally similar to the combination of the position: relative and top / left properties, there are a number of significant differences . According to Paul Irish, an engineer with the Google Chrome team, using translate(x, y) is preferable for two reasons :
· the translate() property uses subpixel interpolation, so that the movement of the element looks smoother
· the translate() property runs in the browser with better performance (figure 4), so you can use more animations at the same time
Figure 3 – frame time Comparison using top/left and translate()
In the course of the study, the ways of creating a parallax effect on a web page were analyzed. Currently, there are two most popular tools — parallax creation with the help of
As an analogue, you can create a parallax effect using CSS. The main advantage of this approach is the declarative style of description, but in some cases it can also be a minus. Good performance of CSS effects in the browser makes this method preferable. The negative side of using CSS to create parallax can be called the lack of direct control over the process of moving elements, which leads to the impossibility of creating truly complex scenes.