Skip to main content
removeu 39 caracteres do conteúdo
Fonte Link
user96296
user96296

Como completarativar animação do desenho SVG com scroll do mouseao chegar na div dele?

Como eu faço para fazer o desenho se completar de acordo com o scrolla animação do mouse,desenho começar assim que eu chegar perto dele? Porquê o desenho fica quase perto do footer no meu site, e como está começando a animação começa assim que carrega aeu entro na página, eu não vejoestou perdendo ela se eu estiver na parte de cima do site.

Eu gostaria de fazer istoA animação é parecida com ele, tem um exemplo nestea deste site aqui, gostaria de ir completando o desenhoporém, ao invés de acordoser com o scroll do mouse, é com a altura do scroll/página.

Como completar desenho SVG com scroll do mouse?

Como eu faço para fazer o desenho se completar de acordo com o scroll do mouse, o desenho fica quase perto do footer, como está começando a animação assim que carrega a página, eu não vejo ela se eu estiver na parte de cima do site.

Eu gostaria de fazer isto com ele, tem um exemplo neste site aqui, gostaria de ir completando o desenho de acordo com o scroll do mouse.

Como ativar animação do desenho SVG ao chegar na div dele?

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.

Fonte Link
user96296
user96296

Como completar desenho SVG com scroll do mouse?

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 o desenho se completar de acordo com o scroll do mouse, o desenho fica quase perto do footer, aí como está começando a animação assim que carrega a página, eu não vejo ela se eu estiver na parte de cima do site.

Eu gostaria de fazer isto com ele, tem um exemplo neste site aqui, gostaria de ir completando o desenho de acordo com o scroll do mouse.

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>