ScrollMagic插件正在工作，但不是"打结”;滚动的动画

ScrollMagic plugin is working, but is not "tying" the animation to the scroll

本文关键字：打结 quot 滚动 动画 插件 工作 ScrollMagic      更新时间：2023-09-26

我正在尝试使用scrollmagic插件实现SVG文本滚动，例如：

http://janpaepke.github.io/ScrollMagic/examples/advanced/svg_drawing.html

然而，当我从这里获取示例代码并将其合并到我的网站中时，SVG动画可以工作，但SVG动画同时发生，而不是与窗口上的滚动成1:1的关系。。

我认为一定有某种场景或控制器属性必须启用此功能？以下是我在这个项目中使用的特定代码：

HTML：

<div class="resume-block-3 container">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="350" height="200">
                <path id="word" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1009.23px; stroke-dashoffset: 1009.23px;" fill="none" stroke="#fff" stroke-width="5" d="M22.328,70.018c9.867-7.4,10.724,20.434,13.014,28.694c-0.08-9.105-1.308-31.463,11.936-31.886
                c11.313-0.361,17.046,19.368,16.367,28.098c-1.432-10.289,6.234-30.682,18.163-25.671c11.505,4.833,8.682,26.772,20.071,31.964
                c13.06,5.953,14.854-8.305,19.734-17.017c7.188-12.836,4.933-15.417,29.6-14.8c-8.954-3.842-37.42,1.728-28.539,20.1
                c5.823,12.045,34.911,12.583,30.018-8.873c-5.385,17.174,24.01,23.104,24.01,9.123c0-9.867,3.816-15.937,16.034-18.5
                c8.359-1.754,18.982,4.754,25.9,9.25c-10.361-4.461-51.941-13.776-37.749,12.357c9.435,17.372,50.559,2.289,33.477-6.063
                c-2.871,19.008,32.415,31.684,30.695,54.439c-2.602,34.423-66.934,24.873-79.302,2.134c-13.11-24.101,38.981-36.781,54.798-40.941
                c8.308-2.185,42.133-12.162,25.88-25.587c-2.779,17.058,19.275,28.688,29.963,12.911c6.862-10.131,6.783-25.284,30.833-19.117
                c-9.404-0.429-32.624-0.188-32.864,18.472c-0.231,17.912,21.001,21.405,40.882,11.951"></path>
                <path id="dot" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44.2974px; stroke-dashoffset: 44.2974px;" fill="none" stroke="#fff" stroke-width="5" d="M247.003,38.567c-7.423,1.437-11.092,9.883-1.737,11.142c14.692,1.978,13.864-13.66,1.12-8.675"></path>
            </svg>
        </div>

JS:

function pathPrepare ($el) {
        var lineLength = $el[0].getTotalLength();
        $el.css("stroke-dasharray", lineLength);
        $el.css("stroke-dashoffset", lineLength);
    }
    var $word = $("path#word");
    var $dot = $("path#dot");
    // prepare SVG
    pathPrepare($word);
    pathPrepare($dot);
    // init controller
    var controller = new ScrollMagic.Controller();
var thirdBlockEntrance = new TimelineMax()
        .add(TweenMax.to($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9
        .add(TweenMax.to($dot, 0.1, {strokeDashoffset: 0, ease:Linear.easeNone}))  // draw dot for 0.1
        .add(TweenMax.to("path", 1, {stroke: "#33629c", ease:Linear.easeNone}), 0);         // change color during the whole thing

var tweenScene3 = new ScrollMagic.Scene({
        triggerElement: '.container.resume-block-3',
        offset:200
    })
    .setTween([thirdBlockEntrance])
    .addIndicators()
    .addTo(controller);

我会再次说，这是从更大的项目中删除的，所以如果缺少什么，请先在评论中问我，我会更新帖子。

谢谢你的帮助。

您需要在场景选项中包含持续时间。这将决定控制时间线进度的滚动过程的长度：

     triggerElement: '.container.resume-block-3',
            offset:200,
            duration: 800
相关文章：