1

We saw this page and wanted to know if anyone can point us in the direction of how this was created?

https://www.zoho.com/creator/

Watch the PNG move and animate.

Improve this question
4

The animation was built in the code itself (js, html, css)enter image description here

Improve this answer
2
  • thanks - any idea of an easier way to solve this level of animation? – Chip Stienmetz Feb 28 '15 at 17:45
  • In order to move the png's you have to write the code and embed it in your site. If you don't know how to do that stick to a gif. – Naty Feb 28 '15 at 18:08
3

The author of Sublime Text, Jon Skinner, wrote a small python script:

Instead, I wrote a small Python script that takes a collection of PNG frames as input, and emits a single packed PNG file as output, which contains all the differences between the frames, and some JSON meta-data specifying which bits of the packed PNG file correspond to each frame. JavaScript turns the PNG and JSON into an animation, using either the canvas element, or emulating it using overlaid div elements for older browsers.

I can't link the animation here, as it uses javascript to animate itself, but it's all explained here, and the source code is available here.

Improve this answer
2
  • Thanks for the contribution and welcome to GraphicDesign! Let us know if you have any questions – Zach Saucier Mar 1 '15 at 21:28
  • To be honest, i'm not a graphic designer, I was jsut showing this site to my brother (who is). I use some of the other stack exchange sites quite a lot. – will Mar 1 '15 at 21:33
2

I found APNG format and I have tried to create an animation with PNG format and it works fine. This is the reference of the APNG https://en.wikipedia.org/wiki/APNG

Improve this answer
1

You can simply use Adobe Photoshop to create similar looking animations, even BETTER animations than the one shown in the link, without the knowledge of any CSS3 Animations or JavaScript/jQuery etc.

You can go to Window > Animation in older versions, or Window > Workspace > Motion in the latest version (CC).

Improve this answer
2
  • This is 'an easier way to solve the animation trick'! – Mohammad Sajjad Mar 1 '15 at 20:24
  • Thanks for the contribution and welcome to GraphicDesign! Let us know if you have any questions – Zach Saucier Mar 1 '15 at 20:29
0

To animate a png inside a webpage you need to know either JavaScript or Css3 animation. http://www.w3schools.com/css/css3_animations.asp

You also can make an animated gif.

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.