Smooth grip

Question

I made a simple exciting demo page . He has no attenuation / acceleration. I would like to do the same acceleration / acceleration as on kulesh.info (Flash site) using JavaScript. How can i do this?

Any examples of smooth capture (scrolling, dragging and dropping) in JavaScript are useful, as well as the language agnostic algorithm.

Answer 1

You can get the appearance of a flash using the attenuation equation, sometimes called the zeno paradox.

position += (destination - position) / damping 

I changed your jsFiddle to use it: Look

If you want me to give a more detailed description of the zeno paradox, let me know and I'll post it here with an image or two.

Answer 2

I think this is the best you can get with jQuery: [ Demo ]

 jQuery.fx.interval = 1; // since v1.4.3 var photos = $(".photos"); var scrollLeft = photos[0].scrollLeft; var $el = $(photos[0]); var lastTime = +new Date(); $(window).mousemove(function(event){ var now = +new Date(); var elapsed = now - lastTime; if (dragging && elapsed > 10) { scrollLeft += x - event.clientX; $el.stop().animate({scrollLeft: scrollLeft}, 300, "easeOutCubic"); x = event.clientX; lastTime = +new Date(); } }); $(window).mouseup(function(event){ dragging = false; $el.stop().animate({scrollLeft: scrollLeft}, 500, "easeOutCubic"); }); 

Please note that all possible (small) slowness cannot be fixed at the moment, because it is related to the performance of rendering images of modern browsers. Test - simple linear animation, no events, no jQuery

Answer 3

Try replacing this line:

 photos[0].scrollLeft += x - event.clientX; 

with this ( Updated demo ):

 photos.animate({ scrollLeft : '+=' + (x - event.clientX) }, 12, 'easeOutCirc'); 

Note that I clicked on the jQuery user interface to enable attenuation options. Also, he is very nervous about the jFiddle demo (using Firefox), but this is not at all the case when I test it on my desktop or look at this demo in Chrome. It is best to use the attenuation function without using jQuery animation. But that should give you an idea.

Answer 4

 var dragging = false; var x, startX, startTime, stopTime; var photos = $(".photos"); photos.mousedown(function(event){ dragging = true; startX = x = event.clientX; startTime = new Date(); event.preventDefault(); }); $(window).mousemove(function(event){ if (dragging) { photos[0].scrollLeft += x - event.clientX; stopTime = new Date(); x = event.clientX; } }); $(window).mouseup(function(event){ dragging = false; var left = photos[0].scrollLeft; var dx = (startX - event.clientX); var time = stopTime - startTime; var speed =time/dx; photos.animate({ scrollLeft : (left + dx*time/500), easing :'swing' }, 100/time*1000); });