So everything is pretty much set, we just need to make this come to life by implementing the drag functionality. Let’s start by styling the knob and the separator: Now that the groundwork has been laid, we can move onto the sliding action. It will simply fit into your grid.Ĭur.find('.resize img').css('width', width) This will allow us to not worry about fine-detailing the slider itself for each responsive breakpoint. That’s why I’ve decided to add this script to manually set the width for the second image on page load. Dudley Storey circumvents this by using vw and vh units and setting max-height and max-width, however, this is not always ideal when working with a grid, i.e. The main issue in making a comparison slider responsive is placing the second image on top of the first one and declaring a width based on a grandparent (.slider in this case). Next up, we set the stage by adding some CSS. Even with the stretched version mentioned in her edit, the styling options are highly limited. Similarly, Lea Verou’s pure css implementation uses the resize property which can only initiate the drag interaction on a relatively smaller area. In fact, if shadow-dom manipulation in JS picked up some pace along with clip-path, this can be done in just 2 divs using pseudo-elements. Hopefully, with better clip-path support in the future, this can be done without it. resize div is needed for clipping the second image. This, unfortunately, can not get any simpler for the purposes of a truly responsive comparison slider. While I’m sure this can be handled without any dependencies, I used jQuery for ease of development. Image slider for our FormsCentral Import page. This gave me the chance (and excuse) to build one myself that can be used anywhere. However, I wasn’t able to find a truly responsive one that was simple enough for our needs. There are even pure CSS implementations that are the works of true masters.
So we decided to use a comparison slider.Ĭomparison sliders are nothing new. We needed a creative way to show the barely noticeable differences.
We first tried to show the before and after versions in two separate screenshots side by side, but they were so similar it looked like we used the same image twice. The New Import Wizard ended up being so good that the differences between the original and imported forms were barely noticeable. We quickly built a FormsCentral Import page to welcome new FormsCentral users to our service. We knew that hard times would be ahead for FormCentral users so we decided to build an import tool that would ease the transfer process to JotForm. Image Comparison Sliders are a great way to present before and after cases, this is especially the case when the differences are very small.Ī month ago Adobe FormsCentral announced its closure. We have created a lightweight, responsive image comparison slider that works on any layout and size.
0 kommentar(er)
