Скрипт эффекта “до и после”
827материалов
228тем на форуме
3003комментария
6152пользователя

Скрипт эффекта “до и после”


Описание:

Всем привет! Сегодня я предлагаю Вам оценить и забрать себе на блог классный скрипт, который интерактивно сравнивает два изображения, путем наложения одного на другой. Да что рассказывать - смотрите демонстрацию работы плагина до/после.

Кому пригодиться этот скрипт?

Область применения этого плагина очень широкая. Мне сразу в голову приходят бьюти блоги, то есть про макияж и одежду. Вот там можно делать мгновенное сравнение результата мейкапа или стиля одежды той или иной звезды шоу-бизнеса.

Также не могут обойти стороной скрипт авторы сайтов и блогов про дизайн. Вы сможете круто показать редизайн сайта или ваше личное видение фасадного ремонта Белого дома. Вообщем, есть где разыграться.

Установка:

Где хотите видеть эффект, вставляете код:
Код
<figure class="cImg-image-container"><img src="Ваше изображение ПОСЛЕ" alt="Original Image">
<span class="cImg-image-label" data-type="original">Posle</span>
<div class="cImg-resize-img">
<img src="Ваше изображение ДО" alt="Modified Image">
<span class="cImg-image-label" data-type="modified">Do</span>
</div>
<span class="cImg-handler"></span>
</figure>

В таблицу стилей вставляете код:
Код
img {

        max-width: 100%;

}

.cImg-image-container {

        position: relative;

        width: 100%;

        max-width: 640px;

        margin: 0;

}

.cImg-image-container img {

        display: block;

}

.cImg-image-label {

        position: absolute;

        bottom: 0;

        right: 0;

        color: #ffffff;

        padding: 1em;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;

        opacity: 0;

        -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;

        -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;

        transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;

}

.cImg-image-label.is-hidden {

        visibility: hidden;

}

.is-visible .cImg-image-label {

        opacity: 1;

        -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}

               

.cImg-resize-img {

        position: absolute;

        top: 0;

        left: 0;

        width:0;

        height: 100%;

        overflow: hidden;

        -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden;

        backface-visibility: hidden;

}

.cImg-resize-img img {

        position: relative;

        left: 0;

        top: 0;

        display: block;

        height: 100%;

        width: auto;

        max-width: none;

}

.cImg-resize-img .cImg-image-label {

        right: auto;

        left: 0;

}

.is-visible .cImg-resize-img {

        width: 50%;

        -webkit-animation: cImg-bounce-in 0.7s;

        -moz-animation: cImg-bounce-in 0.7s;

        animation: cImg-bounce-in 0.7s;

}

@-webkit-keyframes cImg-bounce-in {

        0% {

        width: 0;

        }

        60% {

        width: 55%;

        }

        100% {

        width: 50%;

        }

}

@-moz-keyframes cImg-bounce-in {

        0% {

        width: 0;

        }

        60% {

        width: 55%;

        }

        100% {

        width: 50%;

        }

}

@keyframes cImg-bounce-in {

        0% {

        width: 0;

        }

        60% {

        width: 55%;

        }

        100% {

        width: 50%;

        }

}

.cImg-handler {

        position: absolute;

        height: 44px;

        width: 44px;

        /* center the element */

        left: 50%;

        top: 50%;

        margin-left: -22px;

        margin-top: -22px;

        border-radius: 50%;

        background: #dc717d url("/icon/arrows.svg") no-repeat center center; cursor: move;

        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0;

        -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0);}

.cImg-handler.draggable {

        background-color: #445b7c;

}

.is-visible .cImg-handler {

        opacity: 1;

        -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;

        -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;

        transition: transform 0.3s 0.7s, opacity 0s 0.7s;

}

Подключаем библиотеку:
Код
<script>jQuery(document).ready(function($){ //check if the .cImg-image-container is in the viewport        

        //if yes, animate it

        checkPosition($('.cImg-image-container')); $(window).on('scroll', function(){ checkPosition($('.cImg-image-container')); });

               

        //make the .cImg-handler element draggable and modify .cImg-resize-img width according to its position

        $('.cImg-image-container').each(function(){ var actual = $(this);

        drags(actual.find('.cImg-handler'), actual.find('.cImg-resize-img'), actual, actual.find('.cImg-image-label[data-type="original"]'), actual.find('.cImg-image-label[data-type="modified"]')); });

        //upadate images label visibility

        $(window).on('resize', function(){ $('.cImg-image-container').each(function(){ var actual = $(this);

        updateLabel(actual.find('.cImg-image-label[data-type="modified"]'), actual.find('.cImg-resize-img'), 'left'); updateLabel(actual.find('.cImg-image-label[data-type="original"]'), actual.find('.cImg-resize-img'), 'right'); });

        });

});

function checkPosition(container) { container.each(function(){ var actualContainer = $(this);

        if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) { actualContainer.addClass('is-visible'); }

        });

}

//

function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) { 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 his 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); updateLabel(labelResizeElement, resizeElement, 'left'); updateLabel(labelContainer, resizeElement, 'right');        

        }).on("mouseup vmouseup", function(e){ dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); });

        e.preventDefault(); }).on("mouseup vmouseup", function(e) { dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); });

}

function updateLabel(label, resizeElement, position) { if(position == 'left') {

        ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ; } else {

        ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ; }

}

</script>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 31.10.2016 в 16:00
Материал просмотрен: 722 раза
Категория материала: Скрипты для uCoz
К материалу оставлены: 2 комментария

Пожаловаться
Сказать спасибо
Источник

2 комментария


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта