Слайдер сравнения изображений

demosourse

Простой в использовании слайдер для сравнения двух изображений, реализованный на CSS3 и jQuery.

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

Структура

Оба изображения, которые необходимо сравнить будут помещены в элемент 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. У него position: absolute относительно .cd-image-container, а его ширина будет выставляться в зависимости от позиции ползунка .cd-handle.

Изначально ширина элемента .cd-resize-image равна 0, а затем меняется на 50%. Воспользуемся классом cd-bounce-in для обеспечения анимационного эффекта.

Таким образом, анимация запустится только когда .cd-image-container попадёт в область видимости пользователя.

.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 и выставим размер div.cd-image-size.

Когда элемент .cd-image-container попадает в область видимости, то добавим класс .is-visible для запуска первоначальной анимации.

jQuery(document).ready(function($){
    // проверка является ли .cd-image-container в области видимости
    // ...

    // делаем элемент .cd-handle движимым и сменяем позицию .cd-resize-img
    $('.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');
    });
}

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

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

^ Наверх ^