Special offers
۰۰۰۰۰۰
HomeCoursesSubscribe
Interactive Animations with CSS and JavaScript

Interactive Animations with CSS and JavaScript

1h 41mIntermediate2018-09-04

Authors

W. Scott Means

W. Scott Means

Software Developer, Consultant, Author

Course details

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.

Learning objectives
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

Skills covered

CSSWeb Standards3D AnimationJavaScriptWeb DesignOracleFront-End Web DevelopmentVisualization and Real-TimeAnimation and IllustrationWeb DevelopmentProgramming LanguagesOpen SourceSoftware DevelopmentOne-Off

Concepts

Introduction

  • Beyond Flash - Creating animations for the modern web
  • What you should know

Building a Foundation

  • Storyboarding
  • Scene elements
  • Animation strategies
  • Set up your environment

HTML Layout

  • HTML custom elements
  • Responsive CSS with view units
  • Create a square with CSS vmin
  • Center element with CSS margins
  • Center element CSS flexbox
  • Create a dynamic layout with flexbox

Interactivity with JavaScript

  • CSS selector specificity
  • Add a JavaScript event handler
  • Navigating the DOM

Adding Animation

  • Animation setup
  • CSS @keyframes
  • Easing
  • Auto-advance with JavaScript
  • Control animations with classes
  • Animate visibility
  • We need a montage
  • Adding an animationend event handler
  • Animating with CSS transitions
  • Targeted animations using IDs
  • Manipulating DOM with JavaScript
  • Randomize slide displays
  • Set timing for transitions

Working with SVG

  • The DOM is everything
  • Manipulating SVG with JavaScript
  • Applying CSS to SVG
  • Fit and finish

Conclusion

  • Next steps
Log in

Log in to keep your courses, bookmarks, and downloads.

Forgot your password?
Register
40,000 Toman