HavaLite CMS

A new liteweight Content Management System (CMS)

Japng Image animator

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

Usage:

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

www.youtube.com/watch?v=1po70RYaZ8Q

comments powered by Disqus

1 Comments

  1. Written by: Ali
    on 07.Jan.2013
    Very  useful plugin. Thanks.

Leave a Reply

Contact Info

Phone: +49 941 26175

Address: Ayman Teryaki,
Prüfeninger Str. 48,
93047 Regensburg, Germany

Want more info - go to our contact page or visit Google+

Social

Stay up to date. Subscribe via RSS, Facebook, Twitter or Email

Recent Comments