Показать сообщение отдельно
  #7 (permalink)  
Старый 25.08.2016, 14:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

однократная анимация блоков в зоне видимости
Kiano,
замените id на class
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.container {
  margin: 20px;
  width: 200px;
  height: 200px;
}

p{
  height: 2000px;
}

  </style>
  <script type="text/javascript" src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>

  <script>
document.addEventListener("DOMContentLoaded", vis, false);

function vis() {
    var div = [].slice.call(document.querySelectorAll(".container"), 0);
    div = div.map(function(el) {
        return {
            el: el,
            bar: new ProgressBar.Circle(el, {
                strokeWidth: 6,
                easing: "easeInOut",
                duration: 1400,
                color: "#FFEA82",
                trailColor: "#eee",
                trailWidth: 1,
                svgStyle: null
            })
        }
    });

    function anim() {
        div = div.filter(function(el, i) {
            var top = el.el.getBoundingClientRect().top;
            console.log(top);
            if (top > 0 && top < window.innerHeight) {
                el.bar.animate(1);
                return false
            }
            return true
        });
        !div.length && window.addEventListener("scroll", anim, false)
    }
    window.addEventListener("scroll", anim, false);
    anim()
};
  </script>
</head>

<body>
<p></p>
<div class="container"></div>
<p></p>
<div class="container"></div>
</body>
</html>
Ответить с цитированием