I'm creating a dumb prototype for a presenter to demo a web app, and am trying to sort out the best approach for the presentation features that we'd like.
We want to demo a workflow that is about 10 minutes long in real life, and much of which doesn't need to be shown in real-time for the presentation. For presentation purposes, we want to focus on certain phases of this process, and be able to jump forward or back to different parts of the 10 minute window. Most of the jumps would be to a later state of the same screen.
One way to accomplish this would be with a little custom sub nav that let the presenter jump to different html pages for each sub-activity, but I'd like to avoid the page refresh and have the transitions to be smoother than that, perhaps with a fade between each.
I'm thinking I could design this as a single page with each phase we want to focus on in a separate section, fix the position of each section at the top of the page after I'm done with design, and fade between them with my subnav. But that could be a pretty jumbo page to load when all is said and done, and I've never attempted any lazy load stuff so am a little hesitant to march down that road.
So, just looking for some ideas/feedback on the approach. Is the single page/fixed section idea reasonable? Is there any alternative?
I've been surprised that I haven't been able to find a jquery plug in for advancing through html demos in this way, and can't decide if that's because it's likely too complicated to be practical, or too simple to require a plugin.
Thoughts? @bartekkustra, you've usually got some great approaches, anything come to mind?