Animation should work when I scroll to the desired block. Tell me how to implement?

var bar = new ProgressBar.Circle(container, { strokeWidth: 6, easing: 'easeInOut', duration: 1400, color: '#FFEA82', trailColor: '#eee', trailWidth: 1, svgStyle: null }); bar.animate(1.0); // Number from 0.0 to 1.0 
 #container { margin: 20px; width: 200px; height: 200px; } 
 <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> <div id="container"></div> 

    1 answer 1

     var bar = new ProgressBar.Circle(container, { strokeWidth: 6, easing: 'easeInOut', duration: 1400, color: '#FFEA82', trailColor: '#eee', trailWidth: 1, svgStyle: null }); // Ѐункция, которая var visible = function(e) { var elementTop = window.pageYOffset + e.getBoundingClientRect().top, // ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части элСмСнты windowBottom = window.pageYOffset + document.documentElement.clientHeight; // ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ½Π΅ΠΉ части ΠΎΠΊΠ½Π° // Если ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ½Π΅ΠΉ части ΠΎΠΊΠ½Π° большС Ρ‡Π΅ΠΌ вСрхняя ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π° элСмСнта, Ρ‚ΠΎ ΠΌΡ‹ долистали Π΄ΠΎ элСмСнта // Π’Π°ΠΊ ΠΆΠ΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠΌ, Π½Π΅ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° Π»ΠΈ ΡƒΠΆΠ΅ анимация, Π° Ρ‚ΠΎ Π²Ρ‹ΠΉΠ΄Π΅Ρ‚ казус Π² Π²ΠΈΠ΄Π΅ всё врСмя Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‰Π΅Π΅ΡΡ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ if(elementTop < windowBottom && Number(e.dataset.animationState) === 0){ bar.animate(1.0); // Number from 0.0 to 1.0 e.dataset.animationState = 1; // ΠžΡ‚ΠΌΠ΅Ρ‡Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ анимация Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° }; }; // ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ΠΉ элСмСнт var element = document.querySelector('#container'); // ЗапускаСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ // ЗапускаСм ΠΏΡ€ΠΈ скроллС window.addEventListener('scroll', function() { visible(element); }); // И сразу ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы. Π’Π΄Ρ€ΡƒΠ³ элСмСнт ΡƒΠΆΠ΅ находится Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ области visible(element); 
     #container { margin: 20px; width: 200px; height: 200px; } 
     <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> <div id="container" data-animation-state="0"></div> 

    Association: How to determine what element is in the visible area of ​​the browser window?