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

  • 7
    here's your reading: tyk . The implementation is absolutely the same "route". - Alexander Igorevich
  • I think it makes no sense here to describe the step-by-step configuration and algorithm of the plug-in when you can read the details in the article “ Animated Map Path for Interactive Storytelling ” <sup> [ archive ] </ sup>. - sultan

2 answers 2

If you look at the code, then sorts drawing 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. Instantiated canvas with a map. When you roll through to a certain block, the onScroll event fires where the breakpoint is (data-stay = true) and the image coordinates change as a result the map moves. And the route lines are drawn using canvas methods. The beginPath () begins drawing. MoveTo (x, y) sets the position. Draws the point lineTo (x, y). Arc makes an arc. The result is a route curve.

    Look in the direction of Parallax.js. It is designed to create an interactive scrolling, such as on this site http://ttl.by/ru/ru/