javascript - JS 用线条制作标记效果的好方法

Question

有一种用线指向图像特殊元素的效果。请参阅 http://snapsvg.io/ 处的鳄鱼示例.
最初出现图像时，没有任何指向线:

然后滚动后出现带有提示的行:

我知道有 https://github.com/julianlloyd/scrollReveal.js以及很多其他的 js 库来实现出现的效果。

问题是如何制作这条线，将它们放在普通图像(不是 SVG)顶部的确切点上，并在滚动时为线条设置动画？

如果知道这种方法/效果的名称(用谷歌搜索什么)并查看关于好/坏体验或 js 库的评论，那就太好了。

更新:希望看到图像大小调整和精确指向的已解决问题，

在大多数情况下，请参阅 http://www.sitmed.com.br/produto?id=2 中的示例, image has fixed isze and is not scalable, 这不适用于大屏幕或小屏幕。我认为可以使用 svg/canvas 甚至普通 div 在 javascript 中编写缩放库。否则点将在图像缩放时跳跃。

Answer 1

制作这些线并将它们放在准确的位置:

最简单的是使用 canvas 或 svg。这里有一些链接可以做到这一点。

Drawing lines on html page

Drawing arrows on an HTML page to visualize semantic links between textual spans

如果您使用 Canvas ，放置线条很容易。如果您使用图像作为线条，您可以根据大鳄鱼放置这些线条。没什么大不了的。

---

滚动时的动画线条

了解动画的一个好起点是学习任何动画框架。我建议使用 Greensock 动画平台 (GSAP)。它是开源的，也得到了很好的支持。他们为初学者提供了很好的教程和文档。您可以使用 GSAP 以非常抽象的方式制作动画。 Rapheal.js 也适用于动画 svg 图像。至于滚动，你可以找到很多插件，包括问题中提到的那个。