Home / Articles / 5 Flash Tricks You Can Do With HTML5

5 Flash Tricks You Can Do With HTML5

Will HTML5 kill Flash? This is one of the biggest debates surrounding the emergence of HTML5. In truth, HTML5 offers a smaller footprint, more flexibility and a lower development ceiling, but it will take a few years before it has matured to the level of Flash.

With that said, one of the most exciting features of HTML5 is the <canvas> element. Just like Flash, Canvas can be use to draw vector graphics, create amazing effects, or design entire video games and animations with the help of JavaScript. It is supported in all modern browsers, including the upcoming Internet Explorer 10, but you can also use ExplorerCanvas to enable Canvas features in older versions of IE.

Here are a handful of attractive concepts and effects normally associated with Flash that you can achieve with HTML5, along with some resources for how to get started learning.

Water Ripple:

water ripple

This beautiful and interactive water ripple by Almer Thie uses a canvas effect generator for rendering real-time effects over a photo. The effect can be applied to any image to mimic a top-down view of gently reflective water or rain. Clicking the mouse will create a subtle ripple effect. Use this effect to bring photos to life in a gallery or header!

View the Tutorial

Slideshows:

slideshow

Even though jQuery slideshows have been around awhile, Flash slideshows have always produced the coolest effects. This HTML5 slideshow uses Canvas to elegantly display and transition images using a fading color burn effect. Where this excels over Flash and jQuery is in the extremely light implementation and compatibility with mobile devices.

View the Tutorial

Liquid Particles:

particles

Another thing we can all remember about Flash is particles. Canvas can generate any kind of particle, using colors, letters, glyphs, you name it! In this demo, colorful particles follow the mouse and can be broken apart by sweeping the pointer through the swarm. Practical application of this kind of effect could include call-to-action, animated headers, or used in Canvas apps or games.

View the Tutorial

Video:

sound

HTML5 gives us some sleek ways of using audio and video, using streamlined code that loads faster and puts less load on your device. Giants like YouTube and Vimeo are already moving away from Flash to HTML5 video but you can easily make your own custom player that supports webm, .ogg and .mp4.

View Tutorial

Animation:

animation

HTML5 Canvas animation renders amazingly fast and can be created directly in the canvas, through conversion of other formats, or by combining elements and JavaScript to produce cool interactive experiences such as this 404 page by Hakim that blinks and follows your mouse. You can see how he did it here. Animation can also be applied to call-to-action and navigation buttons for a nostalgic Flash-flip effect, as demonstrated in this tutorial.

Learn more about Canvas animation.

Resources:

Below are some excellent resources for developers who want to learn more about Canvas:

Not a developer? You can still take advantage of what Canvas has to offer by implementing HTML5 widgets or ready-made code into your website. There are also several designer tools for creating HTML5 canvas animations and effects, such as Sencha, Hype and Adobe Edge, but they still require a level of expertise.

Introducing the new HTML5 Website Builder from Wix:

wix

Speaking of Flash tricks you can do with HTML5, Wix has revolutionized their hugely successful Flash builder and released a powerful HTML5 website builder like no other. The new applicationis a completely free online tool for designing valid, rich HTML5 websites using a visual drag-and-drop editor, complete with cool effects and elements like those above. It is extremely easy to learn and use and comes with an extensive library of animations, widgets and graphics to get you started designing with HTML5 right now. Check it out here..

About Vail Joy

+Vail Joy is a professional writer, designer and developer with a vibrant background in music business, photography and social media. When she is not contributing her expertise to blogs and e-zines, she is building HTML websites and slaying dragons for Obox Design.

Check Also

Top Websites Where The Use Of CSS is Clearly Portrayed

Top Websites Where The Use Of CSS is Clearly Portrayed

CSS as a language is used to define the styling execution of documents within a …

Leave a Reply

Your email address will not be published. Required fields are marked *