Inspired by Stuart’s and Gary’s examples, I’ve been exploring what Source Grid and Splider can do. This is the first demo I’d like to share: it’s a shameless plagiarism of one of the examples of 1LD’s great ‘Swoop’ stack (and there’s a reason why a $15 stack is amazing value, which you discover when you spend hours recreating and troubleshooting your copy!) Nonetheless, I felt this was a great challenge to see what the Source Grid and Splider combo can do.
And I realise that thinking of Splider as just another slider is a big mistake — it can be so much more!
The demo is at: https://shakennotstirred.net
Things I’d draw attention to here. There are two linked Spliders. The Splider on the right, with the Events cards, is doing the usual slide-shuffling thing. The Splider on the left, which is controlling things, is set to ‘Carousel’ mode (so on a perpetual loop) and to show five slides at a time. Splider is highlighting the current slide (and the non-selected slides are reduced in size and opacity to accentuate this effect). I’ve also put a semi-transparent image over the top, which is creating the fade into the edges.
This example also uses variable fonts. This is the free (‘libre’) Montserrat font from Argentinian designer Julieta Ulanovsky and colleagues, and it can be downloaded from here Montserrat Variable Font (Google have Montserrat for download only as static, desktop fonts). It has just one variable axis: weight from 100 (thin) to 900 (heavy). In this case the font is specified in the usual way through Source’s settings, and activated through a couple of lines of CSS. (I’m intending to put together a tutorial for variable fonts in Rapidweaver in due course).
[Monsterrat-VF is 123kb in size. This project is using just three weights — 500, 620 and 740. The nearest equivalent with static fonts, using weights Medium (500), Semi-Bold (600) and Bold (700) would weigh in at 731kb, and involve three separate downloads. So not only can variable fonts be fine-tuned, but can significantly reduce download times. And once downloaded, the browser can produce an endless number of different instances from them.]
Hope you like it!