From the course: Interactive Animations with CSS and JavaScript
Unlock the full course today
Join today to access over 24,900 courses taught by industry experts.
Randomize slide displays
From the course: Interactive Animations with CSS and JavaScript
Randomize slide displays
- [Instructor] So, if our presentation were an action movie, the building would be about to explode. We are at the point where we are going to show our learning montage and we are going to rapidly, and we have rapidly exceeded the limitations of simple CSS and HTML, because what I want to show is a series of images that are randomly selected. I want to show, sometimes I want to show a circle with a yes flag, sometime I want to show other shapes with a no flag, and I want that to be repeated over and over and get faster and faster. And I want it to be random, I don't want it to be a pre-scripted series of things because number one, I don't want to sit there and decide what they all are. And number two, it just makes the presentation more interesting, you can watch it again and it would be a little different, which I think is cool. So in order to make this happen, we're going to have to use Javascript, so we have implemented our callback function so we have a hook to initiate this…
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)
-
-