0

我正在使用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;"

这个链接是最好的方法吗?有人对实现这一目标有任何其他建议吗?

4

1 回答 1

0

正如@prinzhorn 指出的那样,我只需执行以下操作即可管理它:

var OFFSET = ($(window).height / 5);

$(document).ready(function(){
    if($("#timeline").length > 0){
        var s = skrollr.init({
            constants: {
                screen_offset   :   OFFSET
            }
        });
    }
});

接着:

<path data-_screen_offset-100="stroke-dashoffset:-5772;" data-_screen_offset-5300="stroke-dashoffset:0;"/>

请记住删除传递给 skrollr 的对象中的下划线。

于 2013-08-19T20:30:36.793 回答