Skip to content

Instantly share code, notes, and snippets.

@abruzzihraig abruzzihraig/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
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
You can’t perform that action at this time.