JS用线条制作打标效果的好方法

Question

使用线条指向图像的特殊元素会产生效果。 请参阅http://snapsvg.io/处的鳄鱼示例 当图像首先出现时，没有任何线条指向：

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

我知道有https://github.com/julianlloyd/scrollReveal.js和许多其他js库可以显示效果。

问题是如何制作这些线条，将它们放在通常图像（不是SVG）顶部的确切位置，并在滚动时设置动画线条？

很高兴知道这种方法/效果的名称（谷歌的内容），并查看关于好/坏经验或js库的评论。

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

在大多数情况下，请参阅http://www.sitmed.com.br/produto?id=2处的示例，图片具有固定的isze且不可扩展，这对大屏幕或小屏幕无效。 我认为可以在javascript中编写缩放库，使用svg / canvas甚至是普通div。 Otherewise点将跳转到图像缩放。

Answer 1

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

最简单的方法是使用canvas或svg。以下是一些链接。

Drawing lines on html page

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

如果您使用画布，则放置线条很容易。如果您使用图像作为线条，则可以将这些线条放在大鳄鱼上。没什么大不了的。

---

滚动

上的线条

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

Answer 2

只需使用视差滚动类型js库，例如Skrollr。只需将线条设为背景颜色的div就可以了，然后当您滚动页面时，div的长度会增加。

Answer 3

您所描述的效果让我认为您正在寻找类似于流程或组织结构图“连接器”的东西，它们在图表中锚定箭头以粘合每个元素上的点。在更一般的图形术语中，这些术语可能被称为“线锚点”或类似的东西。

JointJS是HTML5和SVG的一个很好的图表/绘图库，它可以使您正在做的事情相当容易，但更简单的“仅限CSS”可能就是您所需要的。如果您真的想要为图像设置动画，那么更复杂的JavaScript库方法可能是值得的。 JointJS使用Raphael和Backbone.js，因此你可以在盒子里获得很多电动工具。

Answer 4

您可以使用this库来绘制SVG行，它非常易于配置且记录良好。您基本上需要指定“From”和“To”元素，然后一行将为您连接它们。

然后，您可以在滚动时使用该行的stroke-dasharray和stroke-dashoffset属性来实现所绘制线条的效果。

更多SVG动画here

我使用过这种方法，看起来非常酷，希望这有帮助

Answer 5

我认为实现这一点的最佳方式在很大程度上取决于你想要的动画。要重现类似于示例的内容，您可以只堆叠不同的图像（一个用于鳄鱼，一个用于每个组件）。然后在滚动时，您可以更改鳄鱼的z-index并使用css动画来摆放＆＃34;摆动＆＃34;你刚刚揭示的元素的大小。将所有图像放在一个div中，以确保它们一起缩放并很好地对齐并完成。

但是对于其他东西，这项工作可能完全不同，令人惊讶的相似，我真的不认为有一个适合所有需求的解决方案，除非你想使用已经建议的画布，但是这取决于你想要揭示的图形的复杂性。