How are these sites made?

Question

Layout

The customer asked to make an animation like on such a site redcollar.ru . Tell me, as a layout designer with knowledge of html, css and a little jquery, how to do this? So that the background changes when scrolling, etc. And in general, with the help of what exactly was done here, can be used any ready made solutions?

Answer 1

It's called paralax, Google has a lot of information on this topic and ready-made libraries

Answer 2

After all, you can, for starters, find cool examples with a background change and develop \ pick \ adapt:

• https://codepen.io/Funsella/pen/dpRPYZ
  
• https://medium.com/@_patrickcameron/a-complete-beg...
  
• jsfiddle.net/yu3ver/e0t7jbq0
  

Answer 3

And in general, with the help of what exactly is done here

Specifically, a lot has been done here on three.js (yes, almost everything). The brakes mainly come from the same tool, or rather from the fact that it is a little abused where everything can be made easier.
Parallax with pictures, texts and gradient backgrounds for sections; change of inscriptions and plus sign - svg animations; background video; some css transformations for transitions between SPA pages; respectively, the router, practice shows that in such situations it makes sense to write your own, custom; scale on the right - more css transitions; on project and agency pages - big pictures, more videos, some svg animations, a lot of absolute positioning, a bit of scrollfire effect + css transitions; somewhere in the middle - loading resources with Ajax. If all this is divided into separate tasks, then such a site will be quite feasible, the main thing is not to complicate it out of the blue.

Answer 4

Changing the background color when scrolling is done in js, there are ready-made libs.
Video with effects - one block with a regular video and the second block inside with a reduced video.
Text effects and a couple more effects - shaders on webgl.
The rest is in js.