English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 01m | 120 MB
Explore strategies and techniques for animating content using JavaScript and native web technologies. In this focused course, instructor Joseph Labrecque demonstrates how to use vanilla JavaScript to perform common animations within modern web browsers. Joseph begins by covering basic web development concepts, including how to create an HTML document and style it with CSS. He then goes into JavaScript animation fundamentals, looking at how to configure Document Object Model (DOM) elements—the foundational tag structure of HTML—and how to animate these elements across the viewport. He also looks at the HTML5 canvas element and how to perform complex animations within this single, powerful drawing surface. Finally, he looks at the future of JavaScript animation through the Web Animations API, which provides a common language for browsers and developers to describe animations and interact with playback.
Topics include:
- Configuring Document Object Model (DOM) elements
- Starting and ending an animation
- Making an animation interactive
- Animating within canvas
- Drawing within the canvas context
- Working with the Web Animations API
Table of Contents
Introduction
1 Welcome
2 What you should know
3 Using exercise files
Web Development Fundamentals
4 Alternative options for animation
5 Choosing a development environment
6 Creating an HTML document
7 Styling the document with CSS
8 Writing JavaScript
9 Testing in the browser
JavaScript Animation Foundations
10 Configuring DOM elements
11 Visual change over time
12 Ending an animation
13 Making use of requestAnimationFrame
14 Interactive animation
15 Challenge – Additional properties
16 Solution – Additional properties
Animating within Canvas
17 Configuring a canvas element
18 Drawing within the canvas context
19 Animating within the canvas
20 Adding acceleration
21 Challenge – Adding effects
22 Solution – Adding effects
Web Animations API
23 Configuring our web elements
24 Basics of the animate method
25 Using additional keyframe properties
26 Apply easing to the animation
27 Controlling animation playback
Conclusion
28 Goodbye
Resolve the captcha to access the links!