Подгрузка при прокрутке страницы
Всем привет!
Исходник: https://jsfiddle.net/mxjj6jom/707/ Нужно, чтобы круговая диаграмма активировалась при прокрутке на видимой области экрана. p/s/ в благодарность могу закинуть денег на телефон или я.деньгами перечислить. Заранее благодарю! |
position:fixed;
left:50%; top:50%; размерами можно пренебречь |
Цитата:
|
однократная анимация в зоне видимости
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> |
рони, спасибо, что отписался!
Ответил в ЛС |
upd:
Если поставить ещё два контейнера, то они пустые.Можно ли решить эту задачу? |
однократная анимация блоков в зоне видимости
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> |
Часовой пояс GMT +3, время: 15:09. |