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.
[gpp_button color=”blue” url=”http://tympanus.net/Tutorials/PrismEffectSlider/” title=”Prism Effect Slider with Canvas” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button] [gpp_button color=”blue” url=”http://tympanus.net/codrops/2015/03/31/prism-effect-slider-canvas/” title=”Prism Effect Slider with Canvas” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Source[/gpp_button]
