1

Привет, использую плагин SVG анимации, все нравится, но только анимация начинает работать при загрузке страницы. Если объект находится в низу страницы, то пока до него дойдешь, анимация уже завершается. Собственно как доработать плагин, чтобы анимация стартовала при попадании в область просмотра? Спасибо.

https://jsfiddle.net/x3o5fs0x/1/

 (function() {
    var myAnimation = new DrawFillSVG({
      elementId: "kk1"
    });
    document.getElementById("animate").addEventListener( "click", function() {
      myAnimation.replay();
    });
  })();
0

1 ответ 1

1

Вам нужно обрабатывать событие onScroll окна. Я написал пример на jQuery, вы можете переписать если хотите.

В обработчике скрола нужно посчитать координаты окна и позицию скрола, в зависимости от того, где должна начинаться анимация - когда объект только начинает появляться, полностью виден, дошел до середины и т.п. Мой вариант "полностью виден":

$(window).scroll(function() {
   if ($(window).scrollTop() + $(window).height() > $('#kk1').height() + $('#kk1').offset().top) {
       myAnimation.replay();
   }
});

Далее добавляем по желанию такие вещи:

1.Чтобы анимация игралась только один раз, отключим обработчик события при старте анимации:

$(window).off("scroll")

2.Чтобы элемент не было видно до начала анимации, сделаем его целиком прозрачным:

$('#kk1').css("opacity",0)

Убирать его display:none нельзя, поскольку его координаты в этом случае не посчитаются верно.

Итого: https://jsfiddle.net/Lh49jzdn/1/

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.