A Pen by abruzzi.

index.html

<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>

oJzmA.markdown

This is a demo for gradient scroller with css3 filter.

A Pen by abruzzi on CodePen.

License.

script.js

$(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+')'
        });
    });
});

style.css

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;  
}