Book Image

HTML5 Animation and Transition [Video]

By : Mario Andrés Pagella
Book Image

HTML5 Animation and Transition [Video]

By: Mario Andrés Pagella

Overview of this book

<p>From modern websites and data visualizations to video games or hybrid applications, animations and transitions are nowadays something that everyone—your clients, users, or managers—will expect your application to have. Thankfully, the latest HTML specification, HTML5, includes many tools to aid you in that mission. In this video series, you'll learn how to get the most out of all of them.</p> <p>In "HTML5 Animation and Transition", you'll be learning how to develop rich, complex motion graphics using HTML5 APIs such as DOM, CSS3, Canvas, SVG, and WebGL, as well as the basic mathematical concepts behind complex animations—essential knowledge for any modern web developer.</p> <p>In the "HTML5 Animation and Transition" video course, we will tackle everything that you need to know in order to become an expert at animating elements using the latest HTML5 APIs, starting from the most rudimentary methods such as using the DOM, to the most modern ones such as SVG, CSS3, Canvas, and WebGL. At the same time, you'll also be learning the mathematical concepts required to make complex animations.</p> <p>Using the first chapters, you will learn (or refresh!) concepts such as vectors, vector operations, interpolations, and easing and acceleration. Then, you'll learn how to display static graphics on the screen using several rendering methods available in HTML5, such as DOM, CSS3, SVG, Canvas, or WebGL. Once you've learned how to display things on the screen, you'll dedicate entire chapters to implement several animation examples using every single rendering method.</p> <h1>Style and Approach</h1> <p>Packt video courses are designed to cover the breadth of the topic in short, hands-on, task-based videos. Each course is divided into short manageable sections, so you can watch the whole thing or jump to the bit you need. The focus is on practical instructions and screencasts showing you how to get the job done.</p> <p>All videos in HTML5 Animation and Transition include hands-on, practical examples to follow along with. This course is geared towards beginners in HTML5 development and anyone who wants to learn transitions and animation.</p>
Table of Contents (6 chapters)
Chapter 3
Animating Elements
Content Locked
Section 2
Using the DOM to Animate Objects
Normal 0 false false false EN-US X-NONE X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin-top:0in; mso-para-margin-right:0in; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0in; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} How can I use the DOM to animate elements? - Change the fixed values of the “top” and “left” properties to variables, and place it inside the update loop - Add a value to one of the variables within the update loop - Add checks to limit how much this object will move within the page