Question

我将为此使用多条svg行，并且基本上需要此代码才能对5条svg行使用相同的触发器类。只是不确定我将如何去做。任何帮助，将不胜感激。希望这有道理..

<div id="trigger1"></div>
  <svg height="550" width="500">
  <line class="draw" x1="0" y1="0" x2="0" y2="100%" 
   style="stroke:rgb(128,128,128);stroke-width:2" />
</svg>

function pathPrepare ($el) {
    var lineLength = $el[0].getTotalLength();
    $el.css("stroke-dasharray", lineLength);
    $el.css("stroke-dashoffset", lineLength);
}

var $draw = $("line.draw");

// prepare SVG
pathPrepare($draw);
// build tween
var tween = new TimelineMax()
    .add(TweenMax.to($draw, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9


// build scene
var scene = new ScrollMagic.Scene({triggerElement: '#trigger1', duration: 500, tweenChanges: true})
                .setTween(tween)
                .addIndicators() 
                .addTo(controller);

Answer 1

如果您只想删除重复项，则可以这样做

$(".trigger").each(function(){      
    var $draw = $(this).find("line.draw");
    pathPrepare($draw); 
    // build tween
var tween = new TimelineMax()
    .add(TweenMax.to($draw, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9

    new ScrollMagic.Scene({triggerElement: $(this)[0], duration: 500, tweenChanges: true})
                .setTween(tween)
                .addIndicators() 
                .addTo(controller);

})

假设我有这样的标记

<div id="trigger1" class="trigger">

    <svg height="550" width="500">
  <line class="draw" x1="0" y1="0" x2="0" y2="100%" 
   style="stroke:rgb(128,128,128);stroke-width:2" />
</svg>

</div>

<div id="trigger2" class="trigger">

    <svg height="550" width="500">
  <line class="draw" x1="0" y1="0" x2="0" y2="100%" 
   style="stroke:rgb(128,128,128);stroke-width:2" />
</svg>

</div>
<div id="trigger3" class="trigger">

    <svg height="550" width="500">
  <line class="draw" x1="0" y1="0" x2="0" y2="100%" 
   style="stroke:rgb(128,128,128);stroke-width:2" />
</svg>

</div>

希望这会有所帮助。但是，如果您想控制线条的方向，则只能达到这样的程度，那么您可能需要根据触发器部分来编辑pathPrepare函数。

https://codepen.io/srajagop/pen/GaZbrW?editors=0010

使用同一个类使用补间触发多个元素

1 个答案: