"HTML5 Animation with Effects" explains how to create eight unique visual effects for Web pages and online games. Artists and developers can benefit from this short book. We demonstrate how to create animation with global composite operations, global alpha, and radial gradients. The book includes digital color concepts, how to add a background graphic, implement audio play back, and simple timing for animation.
The interactive explosion animation demonstrates how to draw animation where the user taps on the canvas. Determining locations on the HTML5 canvas when the user scrolls, zooms, resizes, or rotates a mobile device, can be challenging. We explain how to track canvas coordinates in order to locate tap events on the canvas.
We assume the reader understands basic HTML markup and JavaScript. The free source code includes comments to help beginners and professional developers. The book concludes with the full source code for each animation. The source code and assets are also available for download. Use the animation examples as they are, or modify properties for your own creative visual effects. The book provides the details to make your own animated effects.
Topics Discussed:
* Twelve Global Composite Operations
* Global Alpha
* Radial Gradients and Color Stops
* How to Draw a Full Circle Arc
* HTML5 Color Formats
* How to Add a Background Graphic
* Play an Audio File with Animation
* Combine Features for Stunning Animation
* Resize, Scroll, and Click Events
The Animated Visual Effects Include:
* Purple Checkered Pattern
* Raindrops
* Interactive Explosion
* Blue Plasma
* Red Bouncing Ball
* Color Burst
* Lava
* Star Field
We tested the interactive code with iPhone 6 Safari browser, Android 4.1.2 default browser, Internet Explorer 11 on Windows 8.1, Windows Phone 8.1 default browser, Windows Vista with Safari browser, Internet Explorer, Firefox, Opera, and Google Chrome.
JavaScript source files provided with the book use functional design.
The interactive explosion animation demonstrates how to draw animation where the user taps on the canvas. Determining locations on the HTML5 canvas when the user scrolls, zooms, resizes, or rotates a mobile device, can be challenging. We explain how to track canvas coordinates in order to locate tap events on the canvas.
We assume the reader understands basic HTML markup and JavaScript. The free source code includes comments to help beginners and professional developers. The book concludes with the full source code for each animation. The source code and assets are also available for download. Use the animation examples as they are, or modify properties for your own creative visual effects. The book provides the details to make your own animated effects.
Topics Discussed:
* Twelve Global Composite Operations
* Global Alpha
* Radial Gradients and Color Stops
* How to Draw a Full Circle Arc
* HTML5 Color Formats
* How to Add a Background Graphic
* Play an Audio File with Animation
* Combine Features for Stunning Animation
* Resize, Scroll, and Click Events
The Animated Visual Effects Include:
* Purple Checkered Pattern
* Raindrops
* Interactive Explosion
* Blue Plasma
* Red Bouncing Ball
* Color Burst
* Lava
* Star Field
We tested the interactive code with iPhone 6 Safari browser, Android 4.1.2 default browser, Internet Explorer 11 on Windows 8.1, Windows Phone 8.1 default browser, Windows Vista with Safari browser, Internet Explorer, Firefox, Opera, and Google Chrome.
JavaScript source files provided with the book use functional design.
