Presenting Slide Decks
If it happens once it’s a novelty. Twice, it’s a coincidence. Three, times it’s a habit. So if it happens four times would that make it an addiction? 🤔 From Parallax to scrolling colour changes to zooming in on image I had another idea to play around with sticky positioning and slides. As has been the case with all my experiments so far, it was surprisingly easier than expected with modern CSS.
We’ve seen this (slide) show before
Slide-based presentations in web pages have been around for years and I’m certain there are more advanced systems than what I’ve been playing around with below. But what I wanted to explore was how
position: sticky could be used.
I created 2 slide decks — one where the new slide comes in and sits over the previous one (
.slide-deck--slide-in-over) and another where the new slide enters by sliding out from under the previous one (
.slide-deck--slide-out-under). Here’s a video of both slides in action:
Note that in the second deck the slides appear to be exiting upwards because they occupy the entire view port. Below is another video of the same 2 slide decks but this time contained by their parent’s dimensions.
The second slide deck (where new slides enter from behind the previous one) requires us to set an appropriate
z-index for each slide. Assuming the HTML source order is the same as as the slide order, the
.slide-deck--slide-out-under class to ensure the slide deck remains accessible without JS.
You could also (in theory) reverse the source order so that the last slide appears before the others in the source and therefore implicitly has the lowest
Of course you want to see live demos. Well here they are:
You can also download all the files in the demo.
Social Media Links