The effect of slides on the site. Version two, supplemented and corrected
Some time ago I published the article “The effect of slides on the site. Through a rake on his own bike. ”
The article rightly scored a lot of comments, mainly on the lack of practical part and code examples.
I bring to your attention a revised article with live examples.
Working on one of the sites, we are faced with the need to realize the effect of slides.
Namely, when a page is scrolled vertically, it should not be moved as a whole, but as a foldable stack of individual sheets.
The first thought was to use the library to add the parallax effect to the page, of which quite a lot can already be found on the Internet. However, we did not need a powerful universal solution, and the time spent on the review, the selection and configuration of a third-party solution would certainly exceed the solution of the problem head-on-own. Yes, and thirst to collect their own bumps and learn the basics finally outweighed the balance in favor of their own bike.
We traditionally develop in Firefox + firebug.
')
The task essentially came down to changing the coordinates of the blocks of the site as the document scrolls inside the browser window.
With jQuery, we simply bind to the onscroll event of the document and write there the change in the position of the blocks depending on the position of the document inside the window.
Rake №1 : If in the process of scrolling to make manipulations with the DOM, affecting the height of the entire document, then we get the brakes due to restructuring and redrawing of content, and the most unpleasant is the jumps when scrolling due to resizing the scroll bar and reinitializing the scrollbar .
To avoid this, we decided not to move elements that are at the first level of the document hierarchy.
Each slide eventually became unchanged in size and position on the page div (.slide_wrapper), inside which is a block wrapper (.slide), which contains the content of the slide.
To implement this mechanism, we have created the class (in its javascript understanding) aldparallax.
When an object is created, the parameters that define the set of elements involved in the movement (.slide_wrapper) and an array with links to callback functions are passed to the constructor.
When created, the aldparallax object is bound to the scroll and resize events of the window object.
When an event occurs, an array of data is prepared for each slide (coordinates of the current visible area of the document, position of the slide in the document, coordinates of the visible area of the slide) and a callback is called, in which the algorithm for moving elements in the slide is laid.
Inside the function, we shift the position of the slide inside the container towards scrolling (by changing the top property at position: relative), which gives the desired effect.
Example 1: jsfiddle.net/88WvX
In this example, the script works with any number of slides (it is enough to enter them into html), starts overlapping only when the slide reaches the top of the window and at the same time correctly works out situations when the slide is larger than the window size and “filling it” can lead to the bottom is hidden behind the next slide before it appears in the window.
It would seem that the problem has been solved, but Rake No. 2 - running this solution in Chrome gives unpleasant feelings. Slides, which should just linger at the top of the window, begin to twitch unpleasantly.
The fact is that unlike Firefox Chrome, when a page is scrolled, it first renders its new position, and then calls onScroll, where we change the coordinates of the block and the page is redrawn.
When writing the article, it turned out that the situation has been fixed in the latest Chrome updates, but I’ll give a solution, as it will be useful from the point of demonstrating the approach to solving such problems and the advantages of using callback functions.
Correcting the situation was allowed by setting the necessary .slide fixed positioning elements (position: fixed;). Such elements do not change their screen position when scrolling.
It remains only to calculate the offset .wrapper relative to the window, but not the parent element and jerks disappear. Adjust our onParallaxEvent function.
Example 2. jsfiddle.net/PWm7v
Rake number 3 : in some mobile browsers, the onScroll event is not generated until the scrolling stops completely, which causes monstrous “animation” delays.
The solution could be to call the coordinate recalculation on a timer, and even better through requestAnimationFrame. This adjustment is left to readers for independent work.
The resulting solution has several important advantages; when you turn off scripts, the page looks completely correct - only the slide effect is turned off.
When using different callback functions for different slides, you can achieve different effects and even diversify well individual blocks within the site content.
In the following example, a simplified example of one of our work projects.
To prevent habra effect, the code was slightly simplified and laid out on jsfiddle:
Example 3: jsfiddle.net/2Lhvb
The article rightly scored a lot of comments, mainly on the lack of practical part and code examples.
I bring to your attention a revised article with live examples.
Working on one of the sites, we are faced with the need to realize the effect of slides.
Namely, when a page is scrolled vertically, it should not be moved as a whole, but as a foldable stack of individual sheets.
The first thought was to use the library to add the parallax effect to the page, of which quite a lot can already be found on the Internet. However, we did not need a powerful universal solution, and the time spent on the review, the selection and configuration of a third-party solution would certainly exceed the solution of the problem head-on-own. Yes, and thirst to collect their own bumps and learn the basics finally outweighed the balance in favor of their own bike.
We traditionally develop in Firefox + firebug.
')
The task essentially came down to changing the coordinates of the blocks of the site as the document scrolls inside the browser window.
With jQuery, we simply bind to the onscroll event of the document and write there the change in the position of the blocks depending on the position of the document inside the window.
Rake №1 : If in the process of scrolling to make manipulations with the DOM, affecting the height of the entire document, then we get the brakes due to restructuring and redrawing of content, and the most unpleasant is the jumps when scrolling due to resizing the scroll bar and reinitializing the scrollbar .
To avoid this, we decided not to move elements that are at the first level of the document hierarchy.
Each slide eventually became unchanged in size and position on the page div (.slide_wrapper), inside which is a block wrapper (.slide), which contains the content of the slide.
To implement this mechanism, we have created the class (in its javascript understanding) aldparallax.
When an object is created, the parameters that define the set of elements involved in the movement (.slide_wrapper) and an array with links to callback functions are passed to the constructor.
When created, the aldparallax object is bound to the scroll and resize events of the window object.
When an event occurs, an array of data is prepared for each slide (coordinates of the current visible area of the document, position of the slide in the document, coordinates of the visible area of the slide) and a callback is called, in which the algorithm for moving elements in the slide is laid.
Inside the function, we shift the position of the slide inside the container towards scrolling (by changing the top property at position: relative), which gives the desired effect.
Example 1: jsfiddle.net/88WvX
In this example, the script works with any number of slides (it is enough to enter them into html), starts overlapping only when the slide reaches the top of the window and at the same time correctly works out situations when the slide is larger than the window size and “filling it” can lead to the bottom is hidden behind the next slide before it appears in the window.
It would seem that the problem has been solved, but Rake No. 2 - running this solution in Chrome gives unpleasant feelings. Slides, which should just linger at the top of the window, begin to twitch unpleasantly.
The fact is that unlike Firefox Chrome, when a page is scrolled, it first renders its new position, and then calls onScroll, where we change the coordinates of the block and the page is redrawn.
When writing the article, it turned out that the situation has been fixed in the latest Chrome updates, but I’ll give a solution, as it will be useful from the point of demonstrating the approach to solving such problems and the advantages of using callback functions.
Correcting the situation was allowed by setting the necessary .slide fixed positioning elements (position: fixed;). Such elements do not change their screen position when scrolling.
It remains only to calculate the offset .wrapper relative to the window, but not the parent element and jerks disappear. Adjust our onParallaxEvent function.
Example 2. jsfiddle.net/PWm7v
Rake number 3 : in some mobile browsers, the onScroll event is not generated until the scrolling stops completely, which causes monstrous “animation” delays.
The solution could be to call the coordinate recalculation on a timer, and even better through requestAnimationFrame. This adjustment is left to readers for independent work.
The resulting solution has several important advantages; when you turn off scripts, the page looks completely correct - only the slide effect is turned off.
When using different callback functions for different slides, you can achieve different effects and even diversify well individual blocks within the site content.
In the following example, a simplified example of one of our work projects.
To prevent habra effect, the code was slightly simplified and laid out on jsfiddle:
Example 3: jsfiddle.net/2Lhvb
Source: https://habr.com/ru/post/180275/
All Articles