在用户滚动时在地图上绘制圆圈

Question

我想建立一个与此类似的非常相似（重复）。只是圈子出现在地图上的第一部分。我能开始的任何想法？这样做的任何jquery插件？

https://www.airbnb.com/annual

如果没有任何插件可以指导我应该从哪里开始？任何例子都很受欢迎。

Answer 1

只需将事件处理程序绑定到scroll事件即可。从$(window).scrollTop()获取您的排名，并根据需要使用此信息绘制和/或调整您的圆圈阵列。

有些方法可以在没有Canvas的情况下在网站上获得效果。您可以使用高position:fixed的{​​{1}} div来创建圈子，您可以调整它们的大小并使用JQuery重新定位它们。您还可以使用SVG，您可以使用SVG创建半径为0的所有圆形对象的数组，并使用滚动效果（或数据集）增大或减小半径。如果你确实使用了画布，你可能需要准备好在每个滚动刻度上重新渲染整个画布，因为否则很难让圆圈“收缩”。这可能会让你的滚动不稳定，就像我在网站上一样。