Join Justin Putney for an in-depth discussion in this video Solution: Create a pause screen, part of Creating a Responsive Presentation in HTML5.
Here's the solution I came up with. It is in the browser right now.…And I'm just going to hit the W key on my keyboard and then it fades to white.…Hit the W key again. It comes right back.…And this works on any slide. Hit the W key.…And fades back in when I hit it again so the way I started to think about this was…first of all what is it I'm wanting to change or hide.…You know, it's easiest to just hide something and display what's behind it and…so in this case, if I hid an individual slide, I'm going to see the background for…the slides container, which is this gradient, and I want to go to white.…
Well, what's white? Well, the body by default of the HTML…document is white, and that's sitting behind that.…So why don't I just go ahead and hide the whole slide container, that's simpler.…So I was kind of working with that thought to begin with.…And one of the first things I needed to do was get the key code for the W key.…So I came back down here to the type something field in the handy dandy key up…documentation of jQuery. Hit the W key.…
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you're ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout