javascript – Movement of a block along a curve while scrolling a page

Question:

Good day! Please tell me how this is done. On the example of this page – http://krym.dramina.ru (after clicking the "start travel" button). At the same time, when scrolling down the page, a curve (route) is painted in the background. When scrolling some blocks (text), the movement of the line becomes motionless, then it continues again. This is very interesting to me. I would like to see this on some specific minimal example, where the script code and style and the html markup itself will be clearly visible in order to understand the logic of such an implementation. I would be very grateful for your examples!

Answer:

If you look at the code, then the sorts of rendering goes to crimea-app.js and crimea-watter. Implementation in 2 words. 1 there is a block of text with sections

<div>
   <section data-zoom-start="2" data-stay="true">...</section>
   <section data-zoom-start="2" data-stay="true">...</section>
<div>
  1. A canvas with a map is instantiated. When scrolling to a certain block, the onScroll event is triggered where there is a breakpoint (data-stay = true) and the coordinates of the image change as a result of which the map moves. And the route lines are drawn using canvas methods. That is, beginPath () starts drawing moveTo (x, y) sets the position draws point lineTo (x, y) arc makes an arc. The result is a curve in the route.
Scroll to Top