JS A good way to make the effect of string marking

Question

There is the effect of pointing to a special image element with a line. See Crocodile Example at http://snapsvg.io/ .
When the image first appears, there is no line indication:

Then, after scrolling, lines with prompts appear:

I know there are https://github.com/julianlloyd/scrollReveal.js and many other js libraries for the appearance effect.

Question: how to make these lines, place them at the exact point on top of the regular image (and not SVG) and animate the lines when scrolling?

It would be great to know the name of this approach / effect (what to do on Google) and look at reviews of good / bad experiences or js libraries.

Update: they want to see a problem with the resizing and exact indication,

In most cases, see the example at http://www.sitmed.com.br/produto?id=2 , the image has a fixed isze and does not scale, this will not work for large or small screens. I think it is possible to write a scaling library in javascript using svg / canvas or even a simple div. Potential points will slide into image scaling.

Answer 1

To make these lines and place them in the exact place:

The easiest way is to use canvas or svg. Here are some links for this.

Drawing lines on an html page

Drawing arrows on an HTML page to render semantic links between text spaces

Placing lines is easy if you use canvas. If you use images for lines, you can place these lines on a relatively large crocodile. Not really.

---

Animated Scrolling Lines

A good place to start exploring animation is to study any animation structure. I would suggest the Greensock Animation Platform (GSAP). It is open source and also well supported. They have good tutorials and documents for beginners. You can animate very abstractly with GSAP. Rapheal.js is also good for animating svg images. As for scrolling, you can find many plugins, including the one mentioned in the question.

Answer 2

Just use the parallax scrolling js library like Skrollr . It is very simple to make div lines with the background color, and then when you scroll the page, the div grows in length.

Answer 3

The effect that you are describing makes me think that you are looking for something like “connectors” of a flow or an organization chart that snap arrows on the chart to glue points on each element. In more general graphic terminology, they are most likely known as “line anchor points” or something similar.

JointJS is a great drawing / drawing library for HTML5 and SVG that can do what you do is pretty easy to do, but the easiest way is “CSS only” can be all you need. If you are really looking for image animations, then a more sophisticated approach to the javascript library may be useful. JointJS uses Raphael and Backbone.js, so you get a lot of power tools in the box.

Answer 4

You can use this library to draw SVG lines, its highly customizable and well-documented. You basically need to specify your From and To items, and the string will link them for you.

You can then play with the stroke-dasharray and stroke-dashoffset lines with the scroll properties to achieve the effect of the line drawn.

More SVG animations here

I used this approach and its pretty cool look, hope this helps

Answer 5

I think the best way to implement this depends a lot on what kind of animation you are going to use. To reproduce something similar, as in your example, you can simply stack different images (one for the crocodile and one for each component). Then, as you scroll, you can change the z-index of the crocodile and use the css animation to “swing” the size of the element you just discovered. Put all the images in one div together to make sure they scale together and align well, and you're done.

But for something else, the work may be completely different, surprisingly similar, I really do not think that there is one solution that meets all the needs, except that you want to use the canvas, as already suggested, but it depends on the complexity the graphics you want to reveal.