I'm trying to make a landing page comparison slider that reacts on the mouseX position, but I want the slider to move the opposite direction of the mouse position. Any suggestions on how I can make that happen?
Demo: https://jsfiddle.net/uw5v94qf/
So basically, like the demo shows, in my case the slider follows the mouse position. But I want it to kind of do the opposite(?), that is revealing the current slide that the mouse is hovering. The more the mouse moves towards the edge, the more it shows that particular slide.
(function($){
$(function(){
$('.before-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('.comparison-slider').css({
left: mouseX,
transition: 'ease-out'
});
$(this).find('.after-wrapper').css({
transform: 'translateX(' + (mouseX) + 'px)',
transition: 'all 1s'
});
$(this).find('.after-image').css({
transform: 'translateX(' + (-1*mouseX) + 'px)',
transition: 'all 1s'
});
});
$('.slider-wrapper').on( "mouseleave", function() {
$(this).parent().find('.comparison-slider').css({
left: '50%',
transition: 'all .3s'
});
$(this).find('.after-wrapper').css({
transform: 'translateX(50%)',
transition: 'all .3s'
});
$(this).find('.after-image').css({
transform: 'translateX(-50%)',
transition: 'all .3s'
});
});
});
})(jQuery);body{
margin:0;
font-family: open sans;
}
.slider-wrapper {
width: 100%;
height: 100vh;
position: relative;
}
.slider-wrapper:hover { cursor: crosshair;; }
.comparison-slider {
}
.before-wrapper {
display: block;
overflow: hidden;
width: auto;
height: 100%;
position: relative;
background: url("#") no-repeat center center #111111;
background-size: cover;
}
.before-wrapper:before {
display: block;
content: '';
width: 100%;
height:100%;
}
.after-wrapper, .after-image {
}
.after-wrapper {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.after-image {
display: block;
width: auto;
height: 100%;
position: relative;
-webkit-transform: translateX(-50%);
61
transform: translateX(-50%);
background: url("#") no-repeat center center #efefef;
background-size: cover;
}
.past, .future{
padding: 40px;
color:#fff;
text-transform:uppercase;
font-size:20px;
/* text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); */
font-weight:800;
z-index:10;
}
.past {
position: absolute;
display: block;
bottom: 0px;
left:0px;
color:#111;
}
.you {
width: 200px;
height: 200px;
position: absolute;
display: block;
right:0px;
left: 0px;
z-index:999;
background: red;
}
.future {
position: absolute;
display: block;
bottom: 0px;
right:0px;
}<body>
<!-- partial:index.partial.html -->
<div class="slider-wrapper">
<div class="past">Interior</div>
<div class="future">3D</div>
<div class="before-wrapper">
<div class="after-wrapper">
<div class="after-image"></div>
</div>
</div>
<div class="comparison-slider"></div>
</div>
<!-- partial -->
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script><script src="./script.js"></script>
</body>
</html>Actually this small adjustment does the trick
var mouseX = $(window).width() - e.pageX ;
You're assigning the mouseX to be it's normal value (e.pageX) subtracted from the window's width