вызвать несколько элементов, используя анимацию, используя один и тот же класс - PullRequest
Новая
       34

вызвать несколько элементов, используя анимацию, используя один и тот же класс

0 голосов
/ 11 мая 2019

Я буду использовать несколько строк 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);

1 Ответ

0 голосов
/ 11 мая 2019

Если вы просто хотите удалить дублирование, вы можете сделать это 

$(".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

...