Holy shit, html5 animation easy as shit

S

shindig

New member
Jul 21, 2012
1,290
10
0
Seattle, WA
At work today I was tasked with making an HTML5 animated image deal that drops images one by one onto a stack at different rotations and when people saw me open a text editor and start using jquery/raphael.js they were like, "Why don't you just use sencha?" I was like wtf is that shit.

Well, this free app that lets you use keyframes and easily(drag/drop) create animation effects, rotating images/video, skewing them, and doing all kinds of cool shit and outputs it right to html5......

It's called Sencha http://www.sencha.com/products/touch/ and it's easy as shit to use. Try it, make some cool banners and shit, it's awesome.
 


Here's a demo that only works on chrome and safari and I don't have time right now to debug it for IE and FF: html5

Just some repeated images sliding in every 5 secs then sliding out. Took like 30 min with a free tool and the canvas has transparent bg so it can be dropped over other graphics. Screw adobe.
 
Tucky said:
Cool but ain't we gotta wait a few years until more browsers can view html5?
Click to expand...

No. Loads of HML5 & CSS3 features work.

To start using HTML5 you only need to specify <!DOCTYPE html> and you're using HTML5. From there it's a matter of using the tags that are currently supported and creating fallbacks for those that aren't. Start with something like HTML5 Boilerplate: The web's most popular front-end template which provides backwards compatibility to IE6.

Look here for compatibility reference... http://html5please.com/
 
There's a checkbox in that program to support FF and IE, at work Im on a mac so just was testing on chrome/safari and didn't realize it wasn't working on FF and IE. Can easily export it again to support those when I get to work in a bit.

But all major browsers support HTML5, and this program outputs pure css3, javascript and html5.

The other thing is that only runs through once and doesn't loop because the images in the folder it reads from are put there dynamically with a php script. So each time this runs it shows a new 8 images dropping in. You can easily tell it to run again when it finishes if you wanted it to loop through the same anim.

This little animation is part of a much larger graphic that runs on a digital billboard.

You can also iframe the canvas into another html page (legit use of iframe).

And you can do multi step animations, vids/images can be spiraling around doing all kinds of crazy shit, rotating and skewing while moving.

It also has some easy html/css/js customizable scripting area, if you want it to show something(text) in between the images as they animate. Can also move from 1 canvas animation to another seemlessly.

Real time saver....
 
You must log in or register to reply here.
Top Bottom