我正在使用skrollr为 svg 设置动画。我正在为页面上生长的东西制作动画。代码由数百条路径组成,如下所示:
<path data-100="stroke-dashoffset:-129;" data-400="stroke-dashoffset:0;" id="v3" fill="none" stroke="#EEB853" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M561.922,268.727c21,20.96,35-21.5,58-14.475c17.5,4.475,34.836,27.435,36.836,35.435" style="stroke-dasharray:6000;" />
只是为了简化你可以这样想:
data-100="stroke-dashoffset:-129;" data-400="stroke-dashoffset:0;"
数据后面的数字是用户向下滚动以设置样式的像素数。因为不同的屏幕有不同的高度,所以我打算:
- 检查屏幕高度
- 循环遍历所有路径
- 根据高度取走数据号的一些像素
因此,在较小的屏幕上,您最终可能会看到
data-50="stroke-dashoffset:-129;" data-350="stroke-dashoffset:0;"
这个链接是最好的方法吗?有人对实现这一目标有任何其他建议吗?