Hey como estan? mi problema es que quiero activar esta funcion:
Código HTML:
<script>
var loader = document.getElementById('la-anim-loader');
var border = document.getElementById('la-anim-border');
var α = 0;
var π = Math.PI;
var t = 15;
var tdraw;
var inProgress = false;
function PieDraw() {
α++;
α %= 360;
var r = ( α * π / 180 )
var x = Math.sin( r ) * 250
var y = Math.cos( r ) * - 250
var mid = ( α > 180 ) ? 1 : 0
var anim = 'M 0 0 v -250 A 250 250 1 ' + mid + ' 1 ' + x + ' ' + y + ' z';
loader.setAttribute( 'd', anim );
border.setAttribute( 'd', anim );
var por = Math.floor((α*100)/360);
document.getElementById('porcent').innerHTML=por+"%";
var el = document.querySelector('.la-anim > svg');
var anim = el.getAttribute('data-por');
var grados = (anim*360)/100;
if( α < grados )
tdraw = setTimeout(PieDraw, t); // Redraw
}
function PieReset() {
clearTimeout(tdraw);
var anim = 'M 0 0 v -250 A 250 250 1 0 1 0 -250 z';
loader.setAttribute( 'd', anim );
border.setAttribute( 'd', anim );
}
$(document).on( 'scroll', function() {
if ($(document).scrollTop()===($(document).height()-$(window).height())){
if( inProgress ) {return false};
inProgress = true;
PieDraw();
}
});
</script>
a varios objetos en mi HTML como estos:
Código HTML:
<div class="la-anim">
<svg data-por="75" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewbox="0 0 500 500">
<path id="la-anim-border" transform="translate(250, 250)"/>
<path id="la-anim-loader" transform="translate(250, 250) scale(0.65)"/>
</svg>
</div>
solo consigo activarlo