Prism Effect Slider with Canvas

Advertisement

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