Пишемо слайдер для порівняння зображень

При створенні сторінки товарів, існують деякі ефективні UX рішення, які можуть бути використані для того, щоб користувач міг "відчути" продукт. Слайдер для зрівняння зображень - одне із цих рішень. Якщо ви переглянете сторінку Sony Ultra HD TV, ви помітите слайдер для зрівняння різниці роздільної здатності. Гугл використовує слайдер для того, щоб показати наскільки крутий їхній Google+ фото фільтр.

А тепер можемо перейти до коду ;)

Демо

Створення структури

Ви використовуємо html5 елемент figure для обгортання оригінального, модифікованого зображення та повзунка слайдеру:

    <figure class="cd-image-container">
        <img src="img/img-original.jpg">
        <span class="cd-image-label" data-type="original">Original</span>
        
        <div class="cd-resize-img"> 
            <img src="img/img-modified.jpg">
            <span class="cd-image-label" data-type="modified">Modified</span>
        </div>
        
        <span class="cd-handle"></span> 
    </figure> 

Додавання стилю

Оригінальне зображення використовується щоб надати правильні розміри його контейнеру .cd-image-container; модифіковане зображення розміщується всередину div.cd-resize-image. В цього елемента встановлено position: absolute над класом .cd-image-container і його ширина змінюється при перетягуванні елементу .cd-handle (використовуючи jQuery), з метою pозкриття/приховання зміненого зображення.

Спочатку ширина елемента .cd-resize-image рівна нулю, але потім ми його змінюєм на 50%, коли слайдер попадає в поле бачення, використовуємо клас .is- visible, який додаємо до .cd-image-container (використовуючи jQuery). Також ми визначаємо cd-bounce-in анімацію для створення ефекту пружності. Анімація почнеться тільки тоді, коли .cd-image-container буде в полі зору користувача.

    .cd-resize-img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0;
      overflow: hidden;
      /* Апаратне прискорення в WebKit */
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    .is-visible .cd-resize-img {
      width: 50%;
      /* bounce в анімації модифікованого зображення */
      animation: cd-bounce-in 0.7s;
    }
    @keyframes cd-bounce-in {
      0% {
        width: 0;
      }
      60% {
        width: 55%;
      }
      100% {
        width: 50%;
      }
    }

Обробка подій

Щоб реалізувати функціонал слайдера, ми визначимо функцію drags(), щоб елемент .cd-handle мав функцію перетягування. Тоді, коли миша натиснута над .cd-handle елементом і рухається, ми оновлюємо .cd-handle-left значення в залежності від поточного положення миші (ми додали стримуючий ліміт руху всередині .cd-image-container) та відповідно змінюємо ширину div.cd-image- size.

Для додання підтримки мобільних пристроїв, ми використовуємо jQuery mobile (конкретно, події vmouse, які імітують події миші на сенсорному пристрої). Останній ефект - .cd-image-container входить в поле зору, ми додаємо .is- visible клас для анімації.

    jQuery(document).ready(function($){
        //функція для перевірки чи у вікні перегляду .cd-image-container 
        // ...
        
        //робимо, щоб .cd-handle елемент можна було перетягувати і .cd-resize-img width змінювався згідно його позиції
        $('.cd-image-container').each(function(){
            var actual = $(this);
            drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual);
        });
     
        //функція оновлення видимості
        // ...
    });
     
    //функціонал перетягування - 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;
                
                //обмеження перетягування елемента всередині свого контейнера
                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);
     
                //функція оновлення видимості
                // ...
                
            }).on("mouseup vmouseup", function(e){
                dragElement.removeClass('draggable');
                resizeElement.removeClass('resizable');
            });
            e.preventDefault();
        }).on("mouseup vmouseup", function(e) {
            dragElement.removeClass('draggable');
            resizeElement.removeClass('resizable');
        });
    }

Демо