HTML5 Online Course
From modern websites and data visualizations to video games or hybrid applications, animations and transitions are nowadays something that everyone 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 this online course, you will learn 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.
Course Curriculum
Introduction
- Easing and Acceleration
- Interpolation
- Introduction
- What is the Difference between a Transition and an Animation?
- Introduction to Vectors
- Vector Examples
Rendering Elements
- 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
Animating Elements
- 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
Introduction to WebGL
- Downloading and Setting Up Three.JS
- Introduction to Cameras
- Rendering Simple Geometries
- Animating Geometries
- Importing Models from Blender
- Rendering Imported Models
- Animating Imported Models
Complex Animations
- Animating Spritesheets #1
- Animating Spritesheets #2
- Particle Generators #1
- Particle Generators #2
- Particle Generators #3
Practical examples
- Practical Examples #1
- Practical Examples #2
- Practical Examples #3
