I definitely want to jump on the HTML5 bandwagon, and for my internship I've been looking for a page flip animation via HTML5, CSS, and JavaScript. Not only does http://www.20thingsilearned.com/ tell the history of the internet, but if you use Firefox>Tools>Web Developer>Page Source you can get a sense of how they made this animation. http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip/ also breaks down the code, gives a zip source code folder, and demos a much simpler version of the code. However, it still doesn't look as good as Flash and seems to only be able to put content on the recto (right) page for each spread.
Fellow Digital Arts Media Network Member Jason typed on our Facebook page some really helpful notes on HTML5 and Processing (an open source processing language used for graphics and animations) that I thought I'd share in this post.
"I
figured out how to put processing projects straight onto the web
without having to do that crappy export as an applet solution. With HTML5 you can literally just inject them into the canvas tag just
as easily as you load pictures on the web with an <img src> tag.
All you have to do is load the processing.js file in the header of your
page, like this:
<script type="text/javascript" src="scripts/processing.js"></script>
You download the processing.js file at the website processingjs.org,
and then to load your processing projects into it, you just have a
folder with the processing project .pde file (exactly like you have it
in your processing sketchbook) and just put it into the canvas like
this:
<canvas data-processing-sources="processingprojecthere/processingprojecthere.pde"></canvas>
And it should work perfectly. Some things to note though that I have
figured out are: to load images, webcam, and extras like that, you need
to have some more specific code, examples are on the processingjs.org
website.
