Something for an August weekend

Shaking The Habitual STH Examples
1

I wasn’t planning to make this, and it’s been by far my most ambitious Splider project to date. In fact it came about because I’d hacked the buttons in Stuart’s nice FAQ Toggle (it’s a great little accordion stack but I really don’t like the plus and minus icons). And I thought this would make an interesting demonstrator of FAQ Toggle looking more like a typical accordion.

Basically, what is here is a unashamed rip-off of one of Skyler’s demos for his Weavium ‘Category’ stack (which uses that and two other of his stacks: ‘Show More’ and ‘Flex’). I’ve borrowed his images and copy and (almost) colours, for comparison. This demo is in fact a pair of linked Spliders, and just uses Stuart’s stacks — Source with Grid Plus Pro, Splider 2, FAQ Toggle and Animate. And making this fills me with admiration for Skyler’s craftsmanship — I couldn’t match his smooth animations and nice UX touches (although I don’t like the way his Flex stack jumps about in such a dizzying way I get vertigo!) It’s also much easier to do something like this with an ‘out of the box’ stack that someone has spent hours refining, too!

Still, this does demonstrate the incredible virtuousity of Splider — here, with Splider slides acting as buttons to control the main Splider itself. It’s also fully responsive (as far as I’ve tested so far, anyway). Enjoy!

https://shakennotstirred.net/category

6 Likes
2

And these are the classes which turn FAQ Toggle’s plus and minus icons into animated upward and downward pointing chevrons. Just stick them into the CSS panel (site or page).

.accordion .a-container .a-btn span:after {
    content: '';
    width: 10px!important;
    height: 3px!important;
    border-radius: 0px!important;
    position: absolute;
    transform:rotate(45deg);
    top:8px!important;
    left:-5px!important;
    transition:all 0.1s ease-in-out!important;
}

.accordion .a-container .a-btn span:before {
    content: '';
    width: 10px!important;
    height: 3px!important;
    border-radius: 0px!important;
    position: absolute;
    transform: rotate(135deg)!important;
    top:8px!important;
    transition:all 0.1s ease-in-out!important;
}

.accordion .a-container.active > .a-btn span::before {
    transform:rotate(-135deg)!important;
}

.accordion .a-container.active > .a-btn span::after {
    transform:rotate(135deg)!important;
}
4 Likes
3

Cool demo.

Thanks for sharing.

1 Like
4

Yes, beautiful… would you please share the project file?

1 Like
5

Nice one.

Screenshot 172
Screenshot 172926×797 63.9 KB

6

That’s really gratifying! I didn’t check yet :-)

OTOH Skyler’s demo page for ‘Category’ gets a not-so-great 60 on desktop and a dismal 42 on mobile. I’d guess because it uses various libraries (the assets are not so big).

As we know, Splider is super efficient. And all the rest of the stacks I’ve used are Stuart’s, so ditto!

7

I’m still tinkering with it (just now got the centre slide to be active in 3-to-view mode, without making 2-to-view look crazy with one slide surrounded by two halves, which the Splider 2 control ‘centre focus?’ option does). In Skyler’s original the elements on the card animate elegantly from the centred format to left align when it drops down. It’s not obvious that this is happening here, but it is (and took a bit of working out!) So I’d like to experiment with a keyframe animation to do this more slowly and gracefully (and to put everything back again like this too).

I’m planning to make all of the demos available as part of a project. Think of it as a kind of ‘Splider covers of Stacks’ Greatest Hits’ album (but hopefully a bit better than the Hammond Organ!)

4 Likes
8

Brilliant. How about a Mecano kit to build every other Stacks slider using just Splider.

Regarding your demo, I think it needs some indication showing how to return to the main slide selections. Perhaps adding in next prev chevrons as per the initial display into the FAQ drop down view.

9

Sounds like a good idea. Originally I just wanted to copy the original, but now I can’t help but want to make improvements to it.

2 Likes
10

That is seriously impressive @jamessouttar! I knew Splider was flexible but you are taking it to places i would never have thought of! Brilliant stuff.

And i will get an option to use chevrons added to the Toggle stack in the next update :)

6 Likes