From the course: Interactive Animations with CSS and JavaScript
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
We need a montage
From the course: Interactive Animations with CSS and JavaScript
We need a montage
- [Instructor] So, now we're about to transition from the first part of the presentation, where we were showing those multiple images and letting the user pick one, to the montage portion, the learning montage, as I call it. Or We Need A Montage, if anybody's a fan of Team America, you're welcome. So what we're gonna do is we're going to add a bunch more markup that will represent the montage more accurately than the other markup would. And so looking at this, we're gonna see that the part that's different. The titles haven't changed. But when we look through, we now have a central image, which is going to be randomly changing. We're gonna write some JavaScript that will continually pick one of the four shapes we have and update that. And depending on what that shape is, we're going to either show or hide the text indicators on either side. So if it's the shape that we think is correct, and this is supposed to represent teaching a deep learning that work to recognize a circle, let's…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Animation setup2m 27s
-
CSS @keyframes3m 21s
-
(Locked)
Easing2m 39s
-
(Locked)
Auto-advance with JavaScript2m 46s
-
(Locked)
Control animations with classes2m 27s
-
(Locked)
Animate visibility5m 7s
-
(Locked)
We need a montage1m 17s
-
(Locked)
Adding an animationend event handler5m 42s
-
(Locked)
Animating with CSS transitions5m 57s
-
(Locked)
Targeted animations using IDs3m 26s
-
(Locked)
Manipulating DOM with JavaScript3m 31s
-
(Locked)
Randomize slide displays7m 46s
-
(Locked)
Set timing for transitions3m 36s
-
(Locked)
-
-