Source demo — something for the weekend

Here’s another double-Splider Source demo, based again on a great 1LD stack (this one ‘Fifty-Fifty Slider’). Here the two Spliders sit directly over the top of each other, which is made easier by the precision of CSS Grid in Source Grid Plus. Both Spliders have content on one side only — the top one has an empty window (full transparency) on the left half of each slide, allowing the image underneath to show through.

The bottom Splider is set to fade — slides don’t move, they fade into one another. The top Splider moves in the usual slider way, slides coming in from the right. Timing and transitions were an issue here: how to make it look like each new slide is sliding over the old one (so pushing the transition into a very slow start) but making sure the new image is there when the old text slide has passed. With a bit of experimentation, I think this is about right now.

https://shakennotstirred.net/slideover/

[Stills from Alain Robbe-Grillet’s 1966 movie ‘Trans-Europ-Express’, with Marie-France Pisier and Jean-Louis Trintignant.]

6 Likes

Another great demo. This is turning into a proper Splider Fest.

1 Like

Haha, yes, it’s Autumn, so the spliders are coming out and casting their webs!

1 Like

This one fixed for Firefox too, now.

2 Likes

Nice effect and thanks for sharing @jamessouttar 🥂

@jamessouttar Love the Shaken not Stirred demo, but its not phone friendly - can it be made compatible?

2 Likes

Good question.

I can’t see any reason why a mobile version would not be possible to add to the demo. Splider has a top to bottom option and with so much positioning control will all the Source CSS Grid stacks it would be pretty straight forward.

Yes, I’m going to make responsive versions — there is one more I want to finish first. And the responsive versions will be a nice demonstration of how CSS grid, and Stuart’s nice implementation of it in Source, gives us the ability to produce very different mobile versions with great precision (something that was difficult, and in many cases impossible, before). That was part of the reason I chose these examples to work up: the stacks which inspired them change the layout quite significantly for mobile. But the bigger thing I hoped to show — inspired by Gary’s ‘Forkin Fox’ and Stuart’s ‘Natura’ projects — was how Source grid and (in this case) Splider give us a set of tools to ‘make things which do something’.