HTML5 Animation and Transition [Video]

Mario Andrés Pagella

HTML5 Animation and Transition [Video]
Downloadable video: $34.99
$20.99
save 40%!

Packt Video. Stream online or download for unrestricted offline use. Learn more

Overview
Course Contents
The Author
Sample Clip
Support
  • New! Packt Video courses: practical screencast-based tutorials that show you how to get the job done. Bite sized chunks, hands on instructions, and powerful results
  • Learn how to harness the power of HTML5's latest APIs to develop incredible animations and transitions
  • Implement every available method to develop motion graphics using open web technologies such as DOM, CSS3, SVG, Canvas, and WebGL
  • Concepts are explained with step-by-step instructions and real-time coding examples

Video Details

Language : English
Release Date : Wednesday, July 31, 2013
Course Length : 2 hours 22 minutes and 37 seconds
ISBN : 1782164189
ISBN 13 : 9781782164180
Author(s) : Mario Andrés Pagella
Topics and Technologies : All Books, Video, Web Development, e-Learning, Open Source

Table of Contents

  1. Introduction [20:48 minutes]
    • Introduction
    • What is the Difference between a Transition and an Animation?
    • Introduction to Vectors
    • Vector Examples
    • Easing and Acceleration
    • Interpolation

  2. Rendering Elements [16:09 minutes]
    • Rendering Elements Using DOM Objects #1
    • Rendering Elements Using DOM Objects #2
    • Rendering Elements Using the HTML5 Canvas Object #1
    • Rendering Elements Using the HTML5 Canvas Object #2
    • Rendering Elements Using SVG with Raphaël #1
    • Rendering Elements Using SVG with Raphaël #2

  3. Animating Elements [29:56 minutes]
    • Setting up a Conventional Rendering Scene
    • Using the DOM to Animate Objects
    • Animating Elements Using CSS3 Transitions
    • Animating Elements Using CSS3 Keyframes
    • Using SVG with Raphaël to Animate Objects
    • Animating Elements Using the HTML5 Canvas Object #1
    • Animating Elements Using the HTML5 Canvas Object #2

  4. Introduction to WebGL [27:35 minutes]
    • Downloading and Setting Up Three.JS
    • Introduction to Cameras
    • Rendering Simple Geometries
    • Animating Geometries
    • Importing Models from Blender
    • Rendering Imported Models
    • Animating Imported Models

  5. Complex Animations [25:30 minutes]
    • Animating Spritesheets #1
    • Animating Spritesheets #2
    • Particle Generators #1
    • Particle Generators #2
    • Particle Generators #3

  6. Practical Examples [13:39 minutes]
    • Practical Examples #1
    • Practical Examples #2
    • Practical Examples #3

Mario Andrés Pagella

Mario Andrés Pagella is the author of "Making Isometric Social RealTime Games with HTML5, CSS3 and JavaScript, O'Reilly Media". He has been developing web applications for almost 15 years and currently works as a Technology Consultant developing websites, mobile apps, and social games for many clients from around the world as well as a Senior Open Standards Developer at R/GA. When he is not spending time developing Indie games, writing game and web development articles for his blog, or advocating the use of HTML5 and JavaScript through his Twitter account, he loves to research and develop experimental projects. Andrés currently lives in Buenos Aires, Argentina, with his fiancée.

Sorry, we don't have any reviews for this video yet.

Associated code downloads are included in the zip file of the purchased video.

Code Downloads

Download the code and support files for this video.


Support, complaints and feedback.

Packt is committed to making Packt Video courses a valuable, useful way for IT professionals to learn new skills. We have made every effort to ensure that this course reaches the required standard and will work on our customer's devices. Please go to our support page.

What you will learn from this video course

  • Learn the mathematical foundations that form the basis of any complex animation, such as vectors, vector operations, interpolations, and easing and acceleration
  • Discover how to display graphics on the screen using HTML5's latest APIs such as DOM, CSS3, SVG, Canvas, or WebGL
  • Learn how to use Raphaël to easily display and animate graphics using SVG
  • Learn how Three.js makes everyone's lives easier by harnessing the power of WebGL
  • Implement functions that will allow you to use cameras, animate simple geometries, or import 3D models from Blender with Three.js
  • Develop a particle generator capable of animating thousands of independent objects simultaneously
  • Learn how to do frame-based animations using the HTML5 Canvas object

Who this video course is for

Whether you come from a technical background or not, HTML5 Animation and Transition will teach you everything that you need to know in order to develop compelling motion graphics using the latest HTML5 graphics rendering methods.

In Detail

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.

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.

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.

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.

Approach

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.

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.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software