1

добрый день, не могли бы вы подсказать как реализовать запуск svg анимации в тот момент когда пользователь доскроллит до неё, а не по готовности страницы? Т.е что бы до момента появления в поле зрения пользователя изображение было не активно и даже не видно.

div {
  background: #cecece;
  padding: 600px 0;
}
<div> </div>

<svg width="500" height="100">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  
  <animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="2s"
           begin="0s"
           fill="freeze" />
</svg>

1
  • Не забывайте принимать ответы на решённые вопросы с помощью галки слева от них
    – dIm0n
    3 сен 2020 в 8:02

1 ответ 1

1

В теге <animation> укажите begin="indefinite" чтобы анимация не запускалась самостоятельно.

Далее, чтобы запустить анимацию, нужно вызвать beginElement() в SVGAnimationElement (это тег <animate>) когда нужно начать анимацию.

Остается только запустить анимацию в нужный момент. Я использовал jQuery для простоты:

$(window).scroll(function(){
    if( $(window).scrollTop() + $(window).height() > $('svg').height() + $('svg').offset().top ){
         $('#myanim')[0].beginElement()
    }
});

Введем дополнительную переменную, чтобы анимация запускалась только раз:

var animationStared = false;

$(window).scroll(function() {
  if (animationStared) return;
  if ($(window).scrollTop() + $(window).height() > $('svg').height() + $('svg').offset().top) {
    $('#myanim')[0].beginElement();
    animationStared = true
  }
});
div {
  background: #cecece;
  padding: 600px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

</div>
<svg width="500" height="100">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  
  <animate id="myanim"
           xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="2s"
           begin="indefinite"
           fill="freeze" />
</svg>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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