Форум

Kiano · #1 (**permalink**) 24.08.2016, 16:07

Всем привет!

Исходник: https://jsfiddle.net/mxjj6jom/707/

Нужно, чтобы круговая диаграмма активировалась при прокрутке на видимой области экрана.

p/s/ в благодарность могу закинуть денег на телефон или я.деньгами перечислить.

Заранее благодарю!

warren buffet · #2 (**permalink**) 25.08.2016, 08:42

position:fixed;
left:50%;
top:50%;

размерами можно пренебречь

ksa · #3 (**permalink**) 25.08.2016, 09:31

Сообщение от warren buffet

position:fixed;
left:50%;
top:50%;

Не факт, что за это ТС тебе "закинет денег"...

рони · #4 (**permalink**) 25.08.2016, 10:40

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>

Kiano · #5 (**permalink**) 25.08.2016, 13:02

рони, спасибо, что отписался!
Ответил в ЛС

Kiano · #6 (**permalink**) 25.08.2016, 13:11

upd:

Если поставить ещё два контейнера, то они пустые.Можно ли решить эту задачу?

рони · #7 (**permalink**) 25.08.2016, 14:05

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>

Форум

Справочник

Discord чат

Курсы javascript