1

Coloquei um arquivo em SVG para ter uma animação como se fosse criando ele em linhas (infelizmente no exemplo abaixo não está funcionando, mas no meu arquivo está.)

Com este código abaixo, assim que entro na página, a animação já começa e acontece até o desenho se completar.

Como eu faço para fazer a animação do desenho começar assim que eu chegar perto dele? Porquê o desenho fica perto do footer no meu site, e como a animação começa assim que eu entro na página, estou perdendo ela.

A animação é parecida com a deste site aqui, porém, ao invés de ser com scroll do mouse, é com a altura do scroll/página.

document.addEventListener('DOMContentLoaded', function() {


        var svg4 = new Walkway({
          selector: '#Layer_1',
          duration: 3500,
          redrawOnFocus: true

        });

        svg4.draw();

        document.addEventListener('dblclick', function() {
          svg.redraw();
          svg4.redraw();
        }, false);
      });
svg {
	width: 157px;
	height: 157px;
	fill: red;
	margin-left: 130px;
}

svg path {
	stroke: #310B3B;
}

svg:not(:root) {
	overflow: visible;
}

path {
	fill: transparent;
}

svg > span {
	position: absolute;
	top: 0;
	right: 0;
}

path, line, polyline {
	stroke: #fff;
	stroke-width: 1px;
}



polyline {
        stroke-width: 4px;
}

#Layer_1 path {
        stroke-width: 6.5px;
      }
<script src="https://github.com/ConnorAtherton/walkway/blob/master/src/walkway.js"></script>


<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
			<path d="M435.2,392.533c-23.526,0-42.667,19.14-42.667,42.667s19.14,42.667,42.667,42.667c23.526,0,42.667-19.14,42.667-42.667
				S458.726,392.533,435.2,392.533z M435.2,460.8c-14.114,0-25.6-11.486-25.6-25.6s11.486-25.6,25.6-25.6s25.6,11.486,25.6,25.6
				S449.314,460.8,435.2,460.8z"/>
			<path d="M494.933,387.029V102.4c0-9.412-7.654-17.067-17.067-17.067h-85.333c-9.412,0-17.067,7.654-17.067,17.067v230.4
				c0,4.71,3.814,8.533,8.533,8.533h17.067c4.719,0,8.533-3.823,8.533-8.533c0-4.71-3.814-8.533-8.533-8.533h-8.533V307.2h8.533
				c4.719,0,8.533-3.823,8.533-8.533s-3.814-8.533-8.533-8.533h-8.533v-17.067h25.6c4.719,0,8.533-3.823,8.533-8.533
				S422.852,256,418.133,256h-25.6v-17.067h8.533c4.719,0,8.533-3.823,8.533-8.533c0-4.71-3.814-8.533-8.533-8.533h-8.533V204.8
				h8.533c4.719,0,8.533-3.823,8.533-8.533s-3.814-8.533-8.533-8.533h-8.533v-17.067h8.533c4.719,0,8.533-3.823,8.533-8.533
				c0-4.71-3.814-8.533-8.533-8.533h-8.533v-17.067h25.6c4.719,0,8.533-3.823,8.533-8.533c0-4.71-3.814-8.533-8.533-8.533h-25.6
				V102.4h85.333v268.988c-12.22-8.201-26.88-12.988-42.667-12.988c-42.351,0-76.8,34.458-76.8,76.8
				c0,15.778,4.796,30.455,12.979,42.667H136.533v-85.333H153.6v25.6c0,4.71,3.823,8.533,8.533,8.533
				c4.71,0,8.533-3.823,8.533-8.533v-25.6h17.067v8.533c0,4.71,3.823,8.533,8.533,8.533s8.533-3.823,8.533-8.533v-8.533h17.067
				v8.533c0,4.71,3.823,8.533,8.533,8.533s8.533-3.823,8.533-8.533v-8.533H256v8.533c0,4.71,3.823,8.533,8.533,8.533
				c4.719,0,8.533-3.823,8.533-8.533v-8.533h17.067v25.6c0,4.71,3.814,8.533,8.533,8.533s8.533-3.823,8.533-8.533v-25.6h17.067
				v8.533c0,4.71,3.814,8.533,8.533,8.533c4.719,0,8.533-3.823,8.533-8.533V384c0-4.71-3.814-8.533-8.533-8.533H136.533
				c-9.89,0-17.067,7.177-17.067,17.067v85.333c0,9.89,7.177,17.067,17.067,17.067h250.496C400.213,505.583,416.964,512,435.2,512
				c42.351,0,76.8-34.458,76.8-76.8C512,416.964,505.583,400.222,494.933,387.029z M435.2,494.933
				c-32.93,0-59.733-26.795-59.733-59.733s26.803-59.733,59.733-59.733c32.93,0,59.733,26.795,59.733,59.733
				S468.13,494.933,435.2,494.933z"/>
			<path d="M443.733,59.733c0-4.71-3.814-8.533-8.533-8.533H102.4C102.4,22.963,79.437,0,51.2,0S0,22.963,0,51.2v409.6
				C0,489.037,22.963,512,51.2,512h42.667c4.71,0,8.533-3.823,8.533-8.533c0-4.71-3.823-8.533-8.533-8.533H51.2
				c-18.825,0-34.133-15.309-34.133-34.133c0-18.824,15.309-34.133,34.133-34.133s34.133,15.309,34.133,34.133
				c0,4.71,3.823,8.533,8.533,8.533c4.71,0,8.533-3.823,8.533-8.533V68.267h332.8C439.919,68.267,443.733,64.444,443.733,59.733z
				 M85.333,422.741C76.262,414.601,64.324,409.6,51.2,409.6s-25.062,5.001-34.133,13.141V51.2
				c0-18.825,15.309-34.133,34.133-34.133S85.333,32.375,85.333,51.2V422.741z"/>
			<path d="M326.767,116.966c1.664,1.664,3.849,2.5,6.033,2.5c2.185,0,4.369-0.836,6.033-2.5c3.337-3.337,3.337-8.73,0-12.066
				l-17.058-17.058c-0.794-0.794-1.732-1.417-2.782-1.852c-2.082-0.862-4.437-0.862-6.519,0c-1.05,0.435-1.988,1.058-2.782,1.852
				L292.634,104.9c-3.337,3.337-3.337,8.73,0,12.066c3.337,3.336,8.73,3.336,12.066,0l2.5-2.5v197.734l-2.5-2.5
				c-3.337-3.336-8.73-3.336-12.066,0c-3.337,3.337-3.337,8.73,0,12.066l17.058,17.058c0.794,0.794,1.732,1.417,2.782,1.852
				c1.041,0.435,2.15,0.657,3.26,0.657c1.109,0,2.219-0.222,3.26-0.657c1.05-0.435,1.988-1.058,2.782-1.852l17.058-17.058
				c3.337-3.337,3.337-8.73,0-12.066c-3.336-3.336-8.73-3.336-12.066,0l-2.5,2.5V114.466L326.767,116.966z"/>
</g>
</svg>

2
  • Mas o desenho é tão pequeno, menor do que a altura da janela. Não dá tempo nem de rolar a tela.
    – Sam
    Commented 24/11/2017 às 20:42
  • vou reformular a pergunta, vai ser melhor começar a animação quando eu chegar na parte de baixo do site... quero tentar fazer isso.
    – user96296
    Commented 24/11/2017 às 20:43

1 Resposta 1

0

Insira um escutador que irá verificar quando o elemento estiver visível na tela, iniciando a animação:

document.addEventListener('DOMContentLoaded', function() {

   var svg4 = new Walkway({
    selector: '#Layer_1',
    duration: 3500,
    redrawOnFocus: true
   });

   $(window).on("scroll", function(){
      var el = $('#Layer_1');
      var eleHeight = el.outerHeight(); // altura do elemento
      var eleTopo = el.offset().top; // distancia do elemento ao topo do documento
      var scrlTopo = $(window).scrollTop(); // quanto foi rolada a janela
      var distance = eleTopo-scrlTopo; // distancia do elemento ao topo da janela
      var altJanela = window.innerHeight; // altura da janela
      if(distance <= altJanela-(eleHeight/2)) {
         svg4.draw(); // inicia a animação
      }
   });

  document.addEventListener('dblclick', function() {
    svg.redraw();
    svg4.redraw();
  }, false);
});

Teste no JSFiddle

1
  • AAAA funcionou! Muuuuito obrigado :)
    – user96296
    Commented 24/11/2017 às 21:33

Você deve fazer log-in para responder a esta pergunta.