Bilde pirms un pēc
by Antikrists
HTML
<figure class="cImg-image-container"><img src="https://i.pinimg.com/originals/c6/5d/3b/c65d3b95a80e97722d8c3fae43d69e9a.jpg" alt="Original Image">
<span class="cImg-image-label" data-type="original">Pēc</span>
<div class="cImg-resize-img">
<img src="https://i.pinimg.com/736x/91/0d/d5/910dd5472986e9b1c0bbb00d403df88b--interesting-history-interesting-facts.jpg" alt="Modified Image">
<span class="cImg-image-label" data-type="modified">Pirms</span>
</div>
<span class="cImg-handler"></span>
</figure>CSS
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%;
...JavaScript
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...