Слайдер для сравнения двух фотографий на CSS3 и jQuery

demosourse

Когда вы создаёте страницу какого-то продукта, есть несколько приёмов, которыми можете воспользоваться чтобы дать пользователю возможность “почувствовать” продукт.

Создаём разметку

Воспользуемся элементом <figure> в качестве контейнера для наших изображений:

<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 -->
        <img src="img/img-modified.jpg" alt="Modified Image">
        <span class="cd-image-label" data-type="modified">Modified</span>
    </div>

    <span class="cd-handle"></span> <!-- slider handle -->
</figure> <!-- cd-image-container -->

Стили

Оригинальное изображение задаст размер контейнеру .cd-image-container; модифицированное изображение будет располагаться в div.cd-resize-image. Его позиция будет абсолютной, относительно контейнера .cd-image-container, а ширина будет контролироваться элементом .cd-handle (используя jQuery). Изначально ширина элемента .cd-resize-image будет равна 0, а затем меняем на 50%.

.cd-resize-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  overflow: hidden;
  /* 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%;
  }
}

Обработка событий

Определим функцию drags(), в которой сделаем элемент .cd-handle передвигаемым.

При нажатии и сдвиге элемента .cd-handle обновляем значение left элемента .cd-handle согласно текущей позиции мыши и меняем ширину элемента div.cd-image-size.

Для поддержки мобильных устройств подключим jQuery mobile.

В добавок, когда слайдер появится в зоне видимости пользователя добавляем класс .is-visible для начальной анимации.

jQuery(document).ready(function($){

    $('.cd-image-container').each(function(){
        var actual = $(this);
        drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual);
    });

});

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');
    });
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://codyhouse.co/gem/css-jquery-image-comparison-slider/
Перевел: Станислав Протасевич
Урок создан: 21 Сентября 2014
Просмотров: 12892
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^