Published

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.

Setting the z-index

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 z-index for the first slide must be the largest and subsequently decrease with each slide. This can be done manually but is an obvious candidate for Javascript. In fact, for progressive enhancement’s sake it may be better to have JS add 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 z-index. This would do away with the Javascript dependency but has the potential to confuse people with CSS disabled. It’s your call.

Live Demos

Of course you want to see live demos. Well here they are:

You can also download all the files in the demo.