Fancy Slider

Go to Source

See the Code
See it Full Page
See Details

Based on dribbble shot by Kreativa Studio –

Fullscreen please. Looks best in Webkit browsers, because clip-path not working in FF/IE without SVG fallbacks, which I don't want to use in this demo. Not responsive atm, I will figure out something soon.


1) Clip-path for image masking rectangle border (webkit only).

2) Blend-mode for this mask.

3) Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!

4) Cool credits side-menu (click small button in the center of demo).

5) Vanilla js with just < 200 lines of code (basically it's just adds/removes classes).

6) Reusable/configurable. I will add some comments to css/js code if I don't forget about it 😀

P.S. – background-attachment: fixed does not working with transforms, so I tried to achieve completly static bg-image during mask movement with translateY, but bg-image was "jumpy", so right now bg-image simply goes up when mask rotates, which is ok for me.

This Pen uses: HTML, SCSS, JavaScript, and