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

однократная анимация в зоне видимости
Kiano, пример проскролить вниз до блока ...
<!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 = document.querySelector("#container");
    var bar = new ProgressBar.Circle(div, {
        strokeWidth: 6,
        easing: "easeInOut",
        duration: 1400,
        color: "#FFEA82",
        trailColor: "#eee",
        trailWidth: 1,
        svgStyle: null
    });

    function anim() {
        var top = div.getBoundingClientRect().top;
        if (top > 0 && top < window.innerHeight) {
            bar.animate(1);
            window.removeEventListener("scroll", anim)
        }
        window.addEventListener("scroll", anim, false)
    }
    anim()
};
  </script>
</head>

<body>
<p></p>
<div id="container"></div>

</body>
</html>
Ответить с цитированием