Japng Image animator

29.Sep.2012  |  Posted by admin  |  Filed under JQuery Plugins

As web designer and programer we all in need for a better alternative than the old well done Gif animations. JQuery (javascript) offers a vriety of plugins that goes in this direction allowing designer to implement good looking effects to html tags. The only probleme is the condition to know at least the basics of javascript and with a minimum of errors in programming. For the image animations i started to make a JQuery plugin that gives us a gif-like results (see jdeadalum) but later i noticed that there are many same solutions (one of the best is spritly) in this category and we still didn't solve the probleme of a simple implementation for non progammers.

For me the apng (animated png) project is the best solution for such pupose but the images need also special programms for preparing them as one image or later by splitting and editing them. So the best idea is to use the technologie of jquery in the backround and offer the implementation in pure HTML without the need to add any line of javascript code or even long lines of CSS.

Japng gives us this opertunity to use html tags the way we are familiar with and to control our animations with some additional XHML attributes. The following example shows a simple html implementation:

<img src="img/run.png" class="japng" width="102" height="130" images="10" ms="100" />
  • The image in this example is a strip of 10 images (images="10) which set beside each others
  • The width of every image (width="102")
  • The height of the whole strip (height="130")
  • The speed of the animation in mili seconds (ms="100")
  • and the most important thing here is the class attribute (class="japng")

See all attributes in case we like to get more than simple animation:

class = "japng"
src = "myimage.png"   // the image source
width = "100"   // the width of a single image in a strip
height = "100"  //
images = "10"   // how many images are within our strip
show = "100%"   // 
ms = "70"   // the speed of the animation in mili seconds
text = "some text over the image"
color = "white"   // color of the text
bgcolor = "black"   // background color of the text
flip = "h" // flip image: (h-orizontal, v-ertical or hv)
opacity = "0.5"   // from 0.0 to 1.0
reverse = "true"   // reversed animation
loop = "10"   // define a number of loops to stop animation after that


All we need is the implimentation of the JQuery framework and japng.js in the head part of our page:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="japng.js"></script>

Japng can also be used in any html tag with the class definition class="japng", this is useful when adding multiple layer png images (See demo)

Japng is compatible to all HTML5 browsers

Demo: Some live examples

Download: japng.zip

another useful links:

how to make strip from gif image with photoshop


Related Postsjquery javascript plugins animation animate images panorama strip


Written by: Ali on 07.Jan.2013

Very  useful plugin. Thanks.

Write a Comment



We are a team, that resides in Germany (please, do forgive our bad English) and we have developed an international based and uncomplicated software for users, who do not know (or do not like to know) much about all this programs like HTML, PHP, SqLite, JS, Browser differences etc.. Users who like  to ....Read More
Havalite CMS in english language Havalite CMS in deutscher Sprache هافالايت العربية لنشر المقالات