When you create a product page, there are some effective UX solutions that can be used to make the user ‘feel’ the product. A comparison image slider is one of those. If you look at the Sony Ultra HD TV product page, they use this approach to emphasize the difference between their display resolution and a standard one. Google uses it to show how cool is a Google+ Photos filter.
Image credits: Unsplash.
Let’s dive into the code ;)
We used a figure element to wrap our original image, the modified image (set as background of the div.cd-resize-img element) and the slider handle:
|
1 2 3 4 5 6 7 8 9 10 |
<figure class="cd-image-container"> <img src="img/img-original.jpg" alt="Original Image"> <span class="cd-image-label" data-type="original">Original</span> <div class="cd-resize-img"> <!-- the resizable image on top --> <span class="cd-image-label" data-type="modified">Modified</span> </div> <span class="cd-handle"></span> <!-- slider handle --> </figure> <!-- cd-image-container --> |
While the original image is inserted inside the code and gives the correct dimentions to its container .cd-image-container, the modified image is added as background of the div.cd-resize-image. This element is set in position: absolute over the .cd-image-container and its width is changed while dragging the .cd-handle element (using jQuery) in order to reveal/hide the modified image.
The .cd-resize-image width is originally set to 0, and then changed to 50% when it enters the viewport, using the .is-visible class which is added to the .cd-image-container (using jQuery). We also defined the cd-bounce-in animation to create a bounce effect.
This way, the animation will only start when the .cd-image-container is visible inside the viewport.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.cd-resize-img { position: absolute; top: 0; left: 0; height: 100%; width: 0; overflow: hidden; background: url(../img/img-modified.jpg) no-repeat left top; background-size: auto 100%; /* Force Hardware Acceleration in WebKit */ transform: translateZ(0); backface-visibility: hidden; } .is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ animation: cd-bounce-in 0.7s; } @keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } |
To implement the slider functionality, we defined the drags() function to make the .cd-handle element draggable (credit to CSS-Tricks).
When the mouse is pressed over the .cd-handle element and moved, we update the .cd-handle left value according to the current mouse position (we have added a constrain to limit the movement inside its parent .cd-image-container) and change the div.cd-image-size width accordingly.
In order to add mobile support, we have been using jQuery mobile (specifically, the vmouse events which simulate the mouse events on a touch device).
As last effect, when the .cd-image-container element enters the viewport, we add the .is-visible class to animate its children.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
jQuery(document).ready(function($){ //check if the .cd-image-container is in the viewport //if yes, animate it checkPosition($('.cd-image-container')); $(window).on('scroll', function(){ checkPosition($('.cd-image-container')); }); //make the .cd-handle element draggable and modify .cd-resize-img width according to its position drags($('.cd-handle'), $('.cd-resize-img'), $('.cd-image-container')); //function to upadate images label visibility here // ... }); function checkPosition(container) { //... } //draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/ function drags(dragElement, resizeElement, container) { dragElement.on("mousedown vmousedown", function(e) { dragElement.addClass('draggable'); resizeElement.addClass('resizable'); var dragWidth = dragElement.outerWidth(), xPosition = dragElement.offset().left + dragWidth - e.pageX, containerOffset = container.offset().left, containerWidth = container.outerWidth(), minLeft = containerOffset + 10, maxLeft = containerOffset + containerWidth - dragWidth - 10; dragElement.parents().on("mousemove vmousemove", function(e) { leftValue = e.pageX + xPosition - dragWidth; //constrain the draggable element to move inside its container if(leftValue < minLeft ) { leftValue = minLeft; } else if ( leftValue > maxLeft) { leftValue = maxLeft; } widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%'; $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() { $(this).removeClass('draggable'); resizeElement.removeClass('resizable'); }); $('.resizable').css('width', widthValue); //function to upadate images label visibility here // ... }).on("mouseup vmouseup", function(e){ dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); }); e.preventDefault(); }).on("mouseup vmouseup", function(e) { dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); }); } |