Get your geometry on with this Material Design inspired shape slider. Developed with SVG shapes and CSS transforms.
How it works
We’re using SVG’s to draw each shape you see on the left side of the screen. When a shape is clicked we transform the shape with CSS and simultaneously transform the content container to show the correct content for the shape that was clicked.
Each section of content takes up 100% of the viewports height. By applying
overflow: hidden to the
<body> we can’t scroll down naturally, instead we use jQuery to manipulate the translateY value on the sections when a shape is clicked, this creates the vertical slider effect.
I’m not going to explain much of the CSS since it’s straightforward. One thing to mention is that the shapes are being manually positioned using the transform property, the downside to this is that there aren’t going to be positioned perfectly when transformed. Another thing to mention is that since the shapes are inside of a fixed element, their space does not affect the flow of the document, that’s why at certain viewports (narrow and short) the content may overlap the shape.
Much like our other demo’s where we hide and reveal content we capture the
.index() value of the element we click and use that value to select the corresponding piece of content to show. In this case, we use that index value to transform the sections, for example, if we click the second shape the index value returned is 1, so we apply the following CSS to the sections.
// i = index value (in this case, 1)
'transform': 'translateY(-' + i +'00%)'
This moves all of the sections up by 100% making the second section visible.