آموزش ایجاد انیمیشن های تعاملی با CSS و JavaScript

Learn how to choose the correct mix of HTML, JavaScript, CSS, and other assets to deliver polished web-based animations.
Released: 9/4/2018
In a world without Flash, mixed-mode animation is a powerful tool for web designers. This course shows how to choose the correct mix of HTML, JavaScript, CSS, and other assets to deliver polished web-based animations that look great on everything from flat-screen televisions to smartphones. Instructor W. Scott Means focuses on how CSS animations, JavaScript, and SVG can be used to produce sophisticated effects while keeping code complexity to a minimum. As he steps through how to build a dynamic presentation, he covers storyboarding, HTML5 custom elements, working with SVG, DOM manipulation, and more.
Topics include:
Storyboarding
Creating a dynamic layout with flexbox
Interactivity with JavaScript
Navigating the DOM
Adding animation
Controlling animations with classes
Manipulating SVG with JavaScript
Applying CSS to SVG
Introduction
Beyond Flash: Creating animations for the modern web
1m 20s
What you should know
1m 4s
1. Building a Foundation
Storyboarding
2m 14s
Scene elements
1m
Animation strategies
1m 43s
Set up your environment
1m 8s
2. HTML Layout
HTML custom elements
3m 15s
Responsive CSS with view units
2m 45s
Create a square with CSS vmin
2m 34s
Center element with CSS margins
3m 20s
Center element CSS flexbox
2m 26s
Create a dynamic layout with flexbox
6m 3s
3. Interactivity with JavaScript
CSS selector specificity
2m 37s
Add a JavaScript event handler
1m 48s
Navigating the DOM
3m 19s
4. Adding Animation
Animation setup
2m 27s
CSS @keyframes
3m 21s
Easing
2m 39s
Auto-advance with JavaScript
2m 46s
Control animations with classes
2m 27s
Animate visibility
5m 7s
We need a montage
1m 17s
Adding an animationend event handler
5m 42s
Animating with CSS transitions
5m 57s
Targeted animations using IDs
3m 26s
Manipulating DOM with JavaScript
3m 31s
Randomize slide displays
7m 46s
Set timing for transitions
3m 36s
5. Working with SVG
The DOM is everything
2m 43s
Manipulating SVG with JavaScript
5m 24s
Applying CSS to SVG
2m 21s
Fit and finish
3m 7s
6. Conclusion
Next steps
46s