A Pen by abruzzi.
<img class="pic" src="https://help.github.com/assets/help/set-up-git-0340a11d480e51c09d6123569d3d1d31.gif" alt="github" /> | |
<div class="scroller-container"> | |
<div class="scroller"></div> | |
</div> |
$(function() { | |
var isPressed = false; | |
var pic = $('.pic'); | |
var scroller = $('.scroller'); | |
var scroller_container = $('.scroller-container'); | |
var scroller_container_offset_x = scroller_container.offset().left; | |
scroller.mousedown(function() { | |
isPressed = true; | |
}); | |
$(document).mouseup(function() { | |
isPressed = false; | |
}); | |
$(document).mousemove(function(e) { | |
if(!isPressed) return; | |
var left_boundary = scroller_container_offset_x; | |
var right_boundary = scroller_container_offset_x + 300 - 20; | |
var current_scroller_x = scroller.offset().left; | |
var point_x = e.clientX; | |
var current_sepia = ((current_scroller_x - left_boundary) / 280).toFixed(1); | |
console.log('scroller_x:' + current_scroller_x); | |
console.log('left_boundary:' + left_boundary); | |
if(current_scroller_x >= left_boundary && current_scroller_x <= right_boundary && point_x > left_boundary && point_x < right_boundary) { | |
scroller.css('left', point_x); | |
console.log(e.clientX + '|' + e.clientY); | |
} | |
if(point_x <= left_boundary){ | |
scroller.css('left', left_boundary); | |
} | |
if(point_x >= right_boundary){ | |
scroller.css('left', right_boundary); | |
} | |
pic.css({ | |
'-webkit-filter': 'sepia('+current_sepia+')', | |
'filter': 'sepia('+current_sepia+')' | |
}); | |
}); | |
}); |
html, body { | |
margin: 0; | |
padding: 0; | |
} | |
.pic { | |
display: block; | |
} | |
.scroller-container { | |
position: relative; | |
width: 300px; | |
height: 20px; | |
border-radius: 10px; | |
background-color: #999; | |
} | |
.scroller { | |
position: absolute; | |
top: 0; | |
left: 0; | |
cursor: pointer; | |
height: 20px; | |
width: 20px; | |
border-radius: 50%; | |
background-color: #333; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment