Effective Web Design is using the right technology to showcase information. A “before and after” element should be responsive and resize according to the type of device it’s being viewed on and the user should be able to adjust which images is visible with either their mouse or their finger.Â
One of the easiest & cleanest ways to implement responsive before and after image effects on your website is with an NPM package called “jquery-image-compare” written by @sylvaincombes.Â
See the Pen jQuery Before & After Image Comparison by Levi Beers (@keystonewebstudios) on CodePen.
Google Earth / Getty Images
Implementing jquery-image-compare
Check out the official NPM instructions. Codepen available above compliments of Keystone Web Studios.
Using Before & After Element in WordPress
There is a plugin available on CodeCanyon for $17 that will allow you to do the same thing as above, however at the time of this post there were no working free plugins that were responsive and touch enabled without using a page builder.Â
