Examples of "new" IT companies
In the course of digital transformation, companies that previously ordered IT solutions themselves become centers of competence in the field of information technology. It's inevitable. And understandable. IT companies should…

Continue reading →

Labor market for IT specialists
The specialists of the IT-service - an essential component of any office. A leading programmer or IT Director in Ukraine can receive up to$ 3,500 per month for his work.…

Continue reading →

Methods of assessing the economic efficiency of the use of information technology in the financial activities of enterprises
The urgency of the problem. A common approach to determining the economic efficiency of it implementation is the ratio of profit and total costs of the enterprise. However, the effectiveness…

Continue reading →


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.

The aim of this work is to analyze technologies to create a parallax effect on a web page. Its visualization is performed using CSS3 properties and JavaScript language, as well as frameworks that work on top of these technologies.

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:

function parallaxScroll(){

var scrolled = $(window).scrollTop();





2. CSS3

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 [10]. According to Paul Irish, an engineer with the Google Chrome team, using translate(x, y) is preferable for two reasons [11]:

· 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

jQuery libraries or its plugins, as well as parallax on CSS. Solutions on jQuery are more flexible due to the use of JavaScript and the ability to fine-tune browser behavior. Also in favor of this technology is the presence of a large number of plugins to create a parallax effect. Their availability gives you the freedom to choose the most appropriate API for each specific project. However, the development of the HTML standard has led to a gradual decrease in demand for jQuery, and currently its use is not recommended, experts insist on using pure native JavaScript code or individual libraries / frameworks to perform the necessary tasks.

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.

Former head of Yota Devices decided to make money on hockey
Vladislav Martynov launches a system of processing and analysis of sports matches The Iceberg project, created by the team of Yota Devices co-founder Vladislav Martynov, will work on November 24.…


Knowledge and skills required by the programmer
In most cases, the programmer needs a computer and the Internet to work. And that's all. In addition, many people already have a computer and access to the Network. These…


How Alexander Sysoev tamed Goliath (part 2)
The creation of the team Real business requires a stop-loss involvement. Only if you immerse yourself in your business with all your strength and all your time — the project…


Why artificial intelligence is not easy to live in Russia
Artificial intelligence technologies are becoming a venture mainstream — an integral element of startups in the field of information technology. Nevertheless, in Russia, AI startups face a number of problems…