Javascript JS是一种利用线条产生标记效果的好方法

有一种效果是用线条指向图像的一个特殊元素。 参见鳄鱼的例子。
当图像第一次出现时，没有任何直线指向：

然后，在滚动后，出现带有提示的行：

我知道有很多其他的js库可以用来显示效果

问题是如何制作这些线条，将它们放置在普通图像（不是SVG）的正上方，并在滚动时设置线条动画？

如果知道这种方法/效果的名称（对谷歌来说是什么）并查看关于好/坏体验的评论，或者js库，那就太好了

更新：要查看已解决的图像大小调整和精确定位问题

在大多数情况下，请参见中的示例，图像具有固定isze且不可扩展，这不适用于大屏幕或小屏幕。 我认为可以用javascript编写伸缩库，使用svg/canvas甚至是纯div。

---

其他点将在图像缩放时跳跃。

要绘制这些线并将其放置在准确位置：

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

如果您使用的是canvas，那么放置线条很容易。如果将图像用于线，则可以相对于大鳄鱼放置这些线。没什么大不了的

---

在滚动时设置线条动画

了解动画的一个好地方是学习任何动画框架。我建议使用Greensock动画平台（GSAP）。它是开源的，也得到了很好的支持。他们为初学者提供了很好的教程和文档。可以使用GSAP以非常抽象的方式设置动画。js还适合制作svg图像的动画。

---

至于滚动，您可以找到许多插件，包括问题中提到的插件。

只需使用视差滚动类型的js库，例如。只需将线条设为带背景色的div，然后滚动页面，div就会变长。您描述的效果让我觉得您在寻找类似流程图或组织结构图的“连接器”，它们在图表中锚定箭头，将每个元素上的点粘在一起。在更一般的图形术语中，这些可能只是被称为“线锚定点”或类似的东西

是一个很棒的HTML5和SVG图表/绘图库，可以让您的工作变得相当简单，但您可能只需要一个更简单的“CSS”。如果您真的希望为图像设置动画，那么更复杂的javascript库方法可能是值得的。JointJS使用Raphael和Backbone.js，因此您可以在工具箱中使用许多电动工具。

您可以使用库来绘制SVG线条，它非常可配置，并且有很好的文档记录。您基本上需要指定“From”和“to”元素，一条线将它们连接起来

然后，您可以在滚动上使用线条的

笔划dasharray

和

笔划dashoffset

属性，以实现绘制线条的效果

更多SVG动画

---

我使用过这种方法，而且它看起来很酷，希望这能有所帮助。我认为实现这种方法的最佳方式在很大程度上取决于你想要什么样的动画。要复制与示例中类似的内容，可以堆叠不同的图像（一个用于鳄鱼，一个用于每个组件）。然后在滚动时，可以更改鳄鱼的z索引，并使用css动画“摆动”刚刚显示的元素的大小。将所有图像放在一个div中，以确保它们可以一起缩放并对齐，这样就完成了

---

但在其他方面，作品可能与令人惊讶的相似完全不同，我真的不认为有一种解决方案可以满足所有需求，除非你想按照已经建议的方式使用画布，但这取决于你想要展示的图形的复杂性。

这是最接近的答案，我最终使用了（GSAP）与滚动插件。其思想是用文本和内部图像缩放SVG，这样点就不会受到干扰。感兴趣的人可以在试用过的Scroller上找到结果，但在动画方面遇到了一些问题，GSAP的工作方式就像一个charmthanks，但和Cito的答案一样，它看起来对于这个任务来说过载了