HTML
----
<div class="container">
<div class="divider-wrapper">
<div class="code-wrapper">
<img src="design.jpg" alt="">
<div class="design-wrapper">
<div class="design-image">
<img src="code.jpg" alt="">
</div>
</div>
</div>
<div class="divider-bar"></div>
</div>
</div>
JS
----
$('.code-wrapper').on( "mousemove", function(e) {
var offsets = $(this).offset();
var fullWidth = $(this).width();
var mouseX = e.pageX - offsets.left;
if (mouseX < 0) { mouseX = 0; }
else if (mouseX > fullWidth) { mouseX = fullWidth }
$(this).parent().find('.divider-bar').css({
left: mouseX,
transition: 'none'
});
$(this).find('.design-wrapper').css({
transform: 'translateX(' + (mouseX) + 'px)',
transition: 'none'
});
$(this).find('.design-image').css({
transform: 'translateX(' + (-1*mouseX) + 'px)',
transition: 'none'
});
});
$('.divider-wrapper').on( "mouseleave", function() {
$(this).parent().find('.divider-bar').css({
left: '50%',
transition: 'all .3s'
});
$(this).find('.design-wrapper').css({
transform: 'translateX(50%)',
transition: 'all .3s'
});
$(this).find('.design-image').css({
transform: 'translateX(-50%)',
transition: 'all .3s'
});
});
CSS
----
body {
color: #fff;
margin: 0 auto;
font: 1em/1.3em Montserrat, Helvetica, sans-serif;
background-color: #333;
}
/* Divider Styles */
.divider-wrapper {
width: 1000px;
height: 540px;
margin: 0 auto;
position: relative;
}
.divider-bar {
position: absolute;
width: 4px;
left: 50%;
top: -10px;
bottom: -15px;
box-shadow: 0 0 10px 1px rgba(0,0,0,0.4);
}
.code-wrapper {
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 2px solid #222;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
.design-wrapper, .design-image {
border-radius: 0 8px 8px 0;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
}
.design-wrapper {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.design-image {
display: block;
width: 100%;
height: 100%;
position: relative;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Hiç yorum yok:
Yorum Gönder