Skip to content

Instantly share code, notes, and snippets.

@ptflp

ptflp/mouse_move_slider.html

Created July 28, 2018 00:51
Show Gist options
  • Save ptflp/bf4d83f34784bbb16b3e293c0cd34a1a to your computer and use it in GitHub Desktop.
Save ptflp/bf4d83f34784bbb16b3e293c0cd34a1a to your computer and use it in GitHub Desktop.
Download ZIP
Slider on mouse move
Raw
mouse_move_slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.item-photo {
position: relative;
overflow: hidden;
margin: 0px;
width: 100%;
height: 300px;
}
.item-photo-wrapper {
white-space: nowrap;
float:left;
}
.item-photo-wrapper li {
padding-top: 50px;
display: inline-block;
height: 100%;
}
.item-photo-wrapper {
position: absolute;
}
.item-photo img {
max-width: 100%;
height: 100%;
transition: all .2s ease-in-out;
border: 1px solid red;
}
.item-photo img:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
z-index: 999;
}
ul {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div class="item-photo">
<div class="item-photo-wrapper">
<ul>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=1" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=2" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=3" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=4" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=5" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=6" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=7" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=8" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=9" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=10" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=11" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=12" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=13" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=14" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=15" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=16" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=17" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=18" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=19" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=20" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=21" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=22" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=23" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=24" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=25" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=26" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=27" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=28" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=29" /></a>
</li>
<li>
<a href="/"><img src="http://placehold.it/120x120&text=30" /></a>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
<script type="text/javascript">
$(function() {
var $bl = $(".item-photo"),
$th = $(".item-photo-wrapper"),
blW = $th.outerWidth(),
blSW = $bl[0].scrollWidth,
wDiff = (blSW / blW), // widths difference ratio
mPadd = 0, // Mousemove Padding
damp = 1, // Mousemove response softness
mX = 10, // Real mouse position
mX2 = blW/2, // Modified mouse position
posX = 0,
mmAA = blW - (mPadd * 2), // The mousemove available area
mmAAr = (blW / mmAA); // get available mousemove fidderence ratio
$bl.mousemove(function(e) {
damp=40;
mX = e.pageX - this.offsetLeft;
mX2 = Math.min(Math.max(0, mX + mPadd), mmAA) * mmAAr;
console.log(mX2);
});
setInterval(function() {
console.log('posX: '+posX+' mX2: '+mX2);
posX += (mX2 - posX) / damp;
$th.css({
marginLeft: blW/2-posX * wDiff
});
}, 10);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment