This is a tutorial on how to create a simple slider with an interesting “prism” effect using HTML5 canvas globalCompositeOperation and a layering technique.
The idea is to place a shape in front of the slider and “reflect” the images of each slide, in order to create the illusion of a prism.

The demo is supported in all major browsers, including Internet Explorer 9.

PrismEffectSlider

Demo    Source

Author

Designbeep is a design blog dedicated to web developers,bloggers,designers and freelancers.Our aim is to share everything about web design,graphic design,tutorials and inspirational articles and more.