Animação que simula ECG

[giselleapires 0]

Boa tarde, tenho um código em html e preciso que ele tenha movimento.

 

Exemplo: http://www.shutterstock.com/video/clip-2638832-stock-footage-ecg-heartbeat-monitor.html?src=rel/2757719:4.

 

Não consigo acertar para que ele faça isso. Será que alguém pode me ajudar? O código é:

<div id="sliderWrapper">

<div id="slider"></div>

<svg id="Layer_1" x="0px" y="0px" width="508px"

height="590px" viewBox="0, 0, 612px, 0" style="enable-background:new 0, 792px, 612px, 0" xml:space="preserve">

<path class="kiwi" style="fill:none;stroke:#0D416E;stroke-width:1;" d="M17.902,114.475h26.949c2.296,0,12.876-10.182,20.063-10.182

c7.186,0,10.83,10.182,12.576,10.182h18.266l7.187,10.779l7.485-100.91l5.091,114.984l6.887-24.554h24.41

c3.239,0,14.816-16.769,20.206-16.769s11.08,16.47,13.475,16.47c2.845,0,26.665,0,26.665,0l27.757,0

c2.296,0,12.875-10.181,20.062-10.181c7.186,0,10.831,10.181,12.577,10.181h18.266l7.187,10.779l7.485-100.91l5.091,114.984

l6.888-24.555h24.41c3.24,0,14.817-16.768,20.207-16.768s11.079,16.469,13.474,16.469c2.845,0,26.666,0,26.666,0h27.813

c2.297,0,12.877-10.181,20.063-10.181s10.829,10.181,12.576,10.181h18.265l7.188,10.779l7.485-100.91l5.092,114.984l6.887-24.555

h24.409c3.238,0,14.816-16.768,20.206-16.768s11.08,16.469,13.476,16.469c2.845,0,26.664,0,26.664,0h27.815

c2.296,0,12.875-10.181,20.063-10.181c7.187,0,10.829,10.181,12.576,10.181h18.265l7.188,10.779l7.486-100.91l5.091,114.984

l6.887-24.555h24.409c3.238,0,14.816-16.768,20.206-16.768s11.079,16.469,13.476,16.469c2.846,0,26.664,0,26.664,0"/>

</g>

</svg>

[L. Henrique 179]

Giselle,

Você pode criar esse mesmo efeito do shutterstock com Canvas. É complicado, vai precisa de bastante JS, mas em compensação fica até mais legal. (Da-lhe matemática).

Se você optar pelo uso de SVG, você vai ter um longo caminho pela frente. Veja alguns exemplos aqui:

• http://codepen.io/chrisgannon/pen/waaByJ/

Abraços!

[giselleapires 0]

Giselle,

 

Você pode criar esse mesmo efeito do shutterstock com Canvas. É complicado, vai precisa de bastante JS, mas em compensação fica até mais legal. (Da-lhe matemática).

 

Se você optar pelo uso de SVG, você vai ter um longo caminho pela frente. Veja alguns exemplos aqui:

• http://codepen.io/chrisgannon/pen/waaByJ/

Abraços!

[giselleapires 0]

Oi Henrique, a imagem fica fixa, não se move. Queria que ela corresse como no código que você enviou. Não manjo nada de códigos. Eu costumo usar o Wix quando preciso criar algum hotsite. Sou designer gráfico e costumo me virar bem, consultando a internet quando preciso. Mas nesse caso estou apanhando muito. Talvez seja incompatibilidade com o Wix, que os sites são em html5. Fora do Wix funciona bem, quando insiro é que dá problema.

[L. Henrique 179]

Giselle,

Fica difícil de ajudar quando você não entende um pouco do código. Você poderia somente copiar e colar todo o código do codepen em sua própria página que iria funcionar normalmente.

Infelizmente não sei como te ajudar nesse ponto. Estude HTML5, CSS3 e JS e então retorne a tarefas tão complexas.

Abraços!

[giselleapires 0]

Obrigada de qualquer forma!

 

Abraço