Japng Image animator

Pure HTML5 image animation

Flip horizontal

<img src="img/run.png" class="japng" flip="h" width="102" height="130" images="10" ms="100" />

Simple html

<img src="img/run.png" class="japng" width="102" height="130" images="10" ms="100" />

Flip horizontal and vertical

<img src="img/run.png" class="japng" flip="hv" width="102" height="130" images="10" ms="100" />

Flip vertical

<img src="img/run.png" class="japng" flip="v" width="102" height="130" images="10" ms="100" />

     

Loop 15 times + reverse

<img src="img/run2.png" class="japng" width="210" height="278" images="12" ms="70" loop="10" reverse="true" />

 
     

One image panorama view + some text over it

<img src="img/pano.jpg" class="japng" width="800" height="170" ms="50" strip="700" text="One image panorama view + some text over" color="#fff" />

To edit the text in css, use the class="japng_text"

 

reverse + opacity

<img src="img/pano.jpg" class="japng" width="800" height="170" ms="50" strip="700" opacity="0.5" reverse="true" />

 

Multiple layer images

<div src="img/halloween.jpg" class="japng" ms="30" width="100" height="150" images="1" show="150"><img src="img/bat.png" class="japng" width="150" height="150" images="10" ms="120" flip="h" /></div>

See documentation of Japng on Havalite.com