javascript - Easy pie chart does not: loading animation using Waypoint JS -
javascript - Easy pie chart does not: loading animation using Waypoint JS -
i designing 1 page scrolling webpage. in webpage using easy pie chart in skill page. want load easy pie chart animation when reached skill page. used waypoint js not working. load animation when in skill page when in top , refresh page & go skill page, not working.
my code given bellow
custom.js:
jquery('.skill').waypoint(function() { $('.chart1').easypiechart({ animate: 4000, barcolor: '#000', trackcolor: '#ddd', scalecolor: '#e1e1e3', linewidth: 15, size: 152, }); }, { triggeronce: true, offset: 'bottom-in-view' });
now how can solve problem ?
you can seek code:
$(window).scroll( function(){ /* check location of each desired element */ $('.skill').each( function(i){ var bottom_of_object = $(this).offset().top + $(this).outerheight(); var bottom_of_window = $(window).scrolltop() + $(window).height(); /* if object visible in window, fade in */ if( bottom_of_window > bottom_of_object ){ $('.skill').easypiechart({ size: 140, linewidth: 6, linecap: "square", barcolor: "#22a7f0", trackcolor: "#ffffff", scalecolor: !1, easing: 'easeoutbounce', animate: 5000, onstep: function(from, to, percent) { $(this.el).find('.percent').text(math.round(percent)); } }); } }); });
javascript jquery html jquery-waypoints easypie
Comments
Post a Comment