yaTouchSlider - slider for touch devices

On many mobile sites known to us for touch devices, sliders (listalki) are designed so that the animation occurs after the swipe gesture, after the person has removed the finger. This is not as beautiful and not as convenient as in native sliders, for example, on the main screens of iOS devices.

We have made jQuery-plugin that helps to make the slider look like native, and we want to share it with all interested. Look at the work of the plugin, for example, in the response of the weather or images on the new search results page for the iPhone and iPod Touch.

Unlike the usual CSS3 Transform, “3D” uses hardware GPU acceleration in iOS. This allows you to achieve a very smooth and pleasant animation. The topic of hardware acceleration of animation is quite extensive, in the future there will be a separate article on this topic.

To make the slider feel native, we took into account many details:

• if the swipe gesture is long, just a few points at a time, then the slider will understand it;
• if svaypnut less than one step, while not overcoming a predetermined threshold (30 pixels by default), the slider "spring" back;
• the slider also springs back when trying to swipe over the left or right limit.

Gesture speed dependency

To slider behaved more vividly and in line with the expectations of the gesture, we taught him to understand the acceleration. It is calculated by the following formula (the conditions and values ​​for it were selected experimentally):
')
accel = speed > 0.3 && speed < 0.6 ? 2 :
speed >= 0.6 && speed < 1 ? 3 :
speed >= 1 ? 4 :
1;

Where speed is the distance from the beginning to the end of the swap gesture divided by its time (school knowledge “v = s / t” has finally come in handy :)

The average swipe gesture is approximately 0.4-0.6 pixels per millisecond. There is a very small, but still noticeable time variation of the CSS Transition animation:

animationTime = accel >= 3 ? '0.3' : '0.2';

After it, the step is multiplied by the acceleration value and animation occurs.

External API

When hanging the slider on the block, you can specify the callback function. It will be called on every svaype with a forwarding set of all the necessary data - speed, step, limits, time, and so on. You can also move the slider without your finger, by triggering the slideLeft([]) or slideRight([]) events on the slider block.

“Fork us on GitHub”

You can view or download the plugin code with comments in the project repository on Github .

PS: We invite all interested in the official blog of the developers of Yandex interfaces .