Kinetic ScrollBar

The effect of kinetic scrolling can now be found almost everywhere. This is really handy when controlling with your fingers or stylus and quite funny when scrolling with the mouse.

In the Web, this effect is still taking root. And it’s not so easy to think up where it will be convenient ... Perhaps only scroll bars come to mind, which are used to scroll some content, mostly pictures, inside the page. For example, you can see the implementation of the gallery on almost any site. Agree, it would be much more interesting if the slider did not stop immediately, as soon as the mouse button was released, but continued to move further by inertia, gradually stopping ...
I will try to consider the process of creating such an effect of the "kinetic" scroll bar'a. What happened in the end you can see here

Algorithm

To begin with, we will consider the general algorithm (dragging the slider + “pre-roll”). It is surprisingly simple:

• Catch the mouseDown on the object, remember the coordinates of the click.
• Track mouseMove. If there was a click (point 1), move the object to a new location, otherwise do nothing.
• Measure the speed. It is enough just to define dx : changing the x coordinate of an object in one mouseMove event.
• Catch mouseUp. Based on the last dx found, you can calculate some momentum and find the distance to which you want to transfer the object.
• Using the attenuation formulas, animate moving an object to the desired distance.

As you can see, everything is quite simple. It is obvious that such an algorithm is universal and suitable not only for JS ...

Implementation

For convenience, you can use the jQuery library and easing effects from the jQuery UI.
The HTML code will be as follows:

<div id="track"> <div id="thumb"></div> </div> 

Where track is the area in which the slider runs, and thumb is the slider itself.
CSS:

 #track { width: 500px; position: relative; display: block; height: 22px; margin: 20px; border: solid 1px #000; overflow: hidden; } #track #thumb { width: 70px; height: 22px; position: absolute; background-color: gray; left: 200px; } 

Now you can go on to write the script itself. I will write in the usual procedural style, since this is a learning example ... if you wish, you can rewrite it on prototypes or arrange it in the form of a jQuery plugin.
We introduce the following global variables:

1. $ track (jQuery object) - scroll bar'a area
2. $ thumb (jQuery object) - slider
3. isClicked (bool) - a variable that determines whether the slider is clicked or not.
4. clickPointX (int) - the x coordinate of the click on the object
5. dx (int) - change the x coordinate of the object for a single mouseMove event.

 var $track = $('#track'); var $thumb = $('#thumb'); var isClicked = false; var clickPointX = 0; var dx = 0; 

First of all, we will forbid some red browsers to try dragging our slider:

 $thumb.bind('dragstart', false); 

Handle mouseDown on the object:

 $thumb.mousedown( function(e) { //     clickPointX = e.pageX - $(this).offset().left; isClicked = true; $thumb.stop(); //    }); 

We process mouseMove, but not on the object, but on the whole document.

 $(document).mousemove( function(e) { if (isClicked) { //   ,     //   var x = (e.pageX - $track.offset().left - clickPointX); //       if (x < -maxBorderOut) { x = -maxBorderOut; } if ( (x + $thumb.width()) > ($track.width() + maxBorderOut)) { x = $track.width() - $thumb.width() + maxBorderOut; } //   var selfLeft = parseInt($thumb.css('left')); $thumb.css({'left': x + 'px' }); dx = x - selfLeft; } }); 

Here an undeclared variable maxBorderOut is encountered , which indicates the maximum number of pixels by which the slider can be dragged outside the region.
And finally, mouseUp:

 $(document).mouseup( function(e) { if (isClicked) { if (Math.abs(dx) < lapse) { dx = 0; } var selfLeft = parseInt($thumb.css('left')); //    // "impulse * dx"    ,     var x = (selfLeft + impulse * dx); // ,        scroll box'a if (x < 0) { x = 0; } if ( (x + $thumb.width()) > $track.width() ) { x = $track.width() - $thumb.width(); } //    $thumb.stop().animate({'left': x + 'px'}, speed, 'easeOutQuart'); } isClicked = false; }); 

The variable lapse defines some error. That is, if dx is less than this error, then the animation does not occur. The value was chosen by eye, and can be chosen not entirely successfully.
The variable impulse is the value of a certain impulse acting on the slider, and determining the distance necessary for moving. In fact, the coefficient is multiplied by dx . It was also selected by eye.
Speed - the speed of the animation.
By changing the values ​​of these parameters, the scroll bar can be customized for specific needs. If necessary, make a vertical scroll should not be difficult.
')

Conclusion

Here we consider not a full-fledged implementation of the scroll bar, but only the part that is directly responsible for dragging and “kinetic” scrolling. The code is pretty simple, and the effect is very interesting.
You can use, for example, when implementing paged navigation, image galleries, etc ...

UPD Made jQuery plugin, you can download it here . How it works, you can look at the example of a simple little carousel ...

It is quite simple to use:

 <div id="track"></div> 

 $('#track').kineticBar()