I want it to be responsive, and I also want to make it dynamic. I don't want to have a series of lock stepped slides where it feels like you're just being forced through a deck in PowerPoint, I don't want that PowerPoint feel for it. Now, something like this is pretty elaborate. I like to start with a mock-up rather than digging right into the code, so I use a tool called Balsamiq mock-ups. I've been using them for several years. It's great for building wire frame presentations that don't have any styling on them because particularly when you're working with clients, it's good to show them something that isn't too finished-looking, because then they'll get that locked into their minds, and so in this case, it's more that there are a lot of different moving parts, and I want to have a good overview of what's gonna happen, so let's go ahead and walk through my mock-up.
Here are my wire frames. This initial slide is gonna prompt the user, they're going to want to click. I'm hoping they'll click on the circle, but it doesn't really matter, they're gonna click somewhere. When they do, I'll emphasize the circle and I'll de-emphasize all the other answers. From here on, the presentation will run on a timer. It won't require any more user interaction, although they can click to proceed. Now I want the incorrect answers to fade out, and the correct answer will now move to the center of the screen, and from here on out, instead of having a choice of answers, it's going to progressively move through a series of correct and incorrect answers.
There will be a training montage. I want it to become progressively faster, until it eventually settles, and then we will finish the presentation with an animated the end graphic.
- Creating a dynamic layout with flexbox
- Navigating the DOM
- Adding animation
- Controlling animations with classes
- Applying CSS to SVG