I am making a responsive horizontal scroll UI. The horizontal scroll position is calculated according to the mouse horizontal position:
$(document).ready(function() {
var docWidth = $('body').width(),
slidesWidth = $('#imgs').width(),
rangeX = slidesWidth - docWidth,
$images = $('#imgs');
$(window).on('resize', function() {
var docWidth = $('body').width(),
slidesWidth = $('#imgs').width(),
rangeX = slidesWidth - docWidth;
})
$(document).on('mousemove', function(e) {
var mouseX = e.pageX,
percentMouse = mouseX * 100 / docWidth,
offset = percentMouse / 100 * slidesWidth - percentMouse / 200 * docWidth;
$images.css({
'-webkit-transform': 'translate3d(' + -offset + 'px,0,0)',
'transform': 'translate3d(' + -offset + 'px,0,0)'
});
});
})
body,html {
margin: 0;
overflow: hidden;
height: 100%;
}
#imgs {
position: absolute;
top: 0; left: 0;
width: 150%; height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 25%;
/* transition: transform .1s; */
}
#imgs > div {
max-width: 9%;
perspective: 500px;
z-index: 1;
}
#imgs img {
display: block;
max-width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgs">
<div><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /></div>
<div><img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /></div>
<div><img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /></div>
<div><img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /></div>
<div><img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /></div>
<div><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /></div>
<div><img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /></div>
<div><img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /></div>
<div><img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /></div>
<div><img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /></div>
</div>
This works pretty well in the browsers I tested. And other than general performance enhancement I am concerned about this issue:
When the mouse comes out of the window and back in, the images snap to the new position. I tried to make that snap smoother with transition:transform .1s
on the #imgs
element (commented out in the CSS) but:
- in chrome, it is a little janky
- in Firefox and edge it is very janky even on small mouse moves
-ms-transform: .1s;
and-webkit-transform: .1s;
? \$\endgroup\$ – Joshua Dawson May 25 '16 at 16:18transition: transform .1s
\$\endgroup\$ – Joshua Dawson May 26 '16 at 15:37