20ThingsLearned is a demo from Google that features an interactive book layout to deliver information about browsers and web technologies. It is not only impressive from a coding standpoint, but a useful resource as well.

Book formats and interatcitvity in design can greatly enhance anything from practical applications such as magazines and learning resources to promotional sites, personal journals and portfolios.

Build your own or See it in action

HTML5 Canvas includes native support for interacting with images, thanks to the draggable attribute, but when combined with kinetic.js, you can turn this event into anything from a visual categorization app to an interactive pinboard for arranging and displaying images. View the example source to see how the image board was done.

Drag and drop events are useful for more than image collages. Consider using them for arranging content, creating agile project management tools, or a fun way for customers to drop products into a shopping cart.

Build your own or See it in action

One of the most powerful features of HTML5 canvas is its interpretation of pixels and how it grants us power over them. As a result, any image filter or effect can be recreated and applied to apps, themes or anything else you can imagine. Google’s  takes you through several examples to learn this trick.

Learn more and See it in action

Hopefully this overview was useful in introducing the powerful relationship between JavaScript, CSS3 and the HTML5 canvas tag, and that it inspires you to implement your own HTML5 tricks into future or existing web projects.

If you are more of a designer than a developer, but wish you could take advantage of the awesome effects and behaviors of HTML5, you’ll be thrilled to learn that Wix will be launching the very first HTML5 website builder on the 26th of March. This tool can significantly change how you design, giving you a visual editor for creating and styling elements, using drag and drop for arranging layouts and adding widgets. You will also get access to a library of interactive canvas elements and animations, CSS3 effects and add-ins such as HTML5 audio, video, slideshows, forms and more. Visit the Wix website to learn more and sign up to be the first to explore this new technology.

来源： 

相关文章