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 →

Specialist in the field of information technologies
In the list of promising specialties direction of information technology (Information Technologies, IT) occupies a special place. This industry has already changed the world and continues to play a key…

Continue reading →

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.…

Continue reading →

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.

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();

$(‘#parallax-bg1’).css(‘top’,(0-(scrolled*.25))+’px’);

$(‘#parallax-bg2’).css(‘top’,(0-(scrolled*.5))+’px’);

$(‘#parallax-bg3’).css(‘top’,(0-(scrolled*.75))+’px’);

}

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.

Social networking in English language learning. Didactic properties of social networks.
At the moment in the Russian education there is a stage of intensive Informatization of training. Such concept as "lifelong learning" is tightly fixed, which means that learning should not…

...

Samsung has registered a new brand of Rize smartphones
According to the documents, Samsung plans to release three new models of Rize10, Rize20 and Rize30 smartphones Samsung has applied for registration of three new smartphone models, T3 writes. The…

...

Sensors everywhere: six stories of incredible profits and artificial intelligence (part 1)
The world has entered the digital era: information technology helps companies earn billions, and those who do not have time for progress, the new economy punishes without mercy Practice shows:…

...

Trends of the labor market in the field of telecommunications
Despite the difficult economic situation, the sphere of telecommunications and it is developing rapidly. This is interesting for applicants, because it offers ample opportunities for growth and a high level…

...