горизонтальный ускоренный карусельный скроллер

Question

Я пытаюсь создать горизонтальный скроллер для этого. http://www.k2.pl/

Я сделал прототип здесь. http://jsfiddle.net/Uu3aP/1

Я заглянул в плагины карусели, но никто не функционирует так, как хотелось бы.

Мне просто интересно, как я выполняю расчет скорости на основе положения x слева и справа и, возможно, использую метод ослабления сторон.

Здесь я нахожусь, любая помощь будет оценена по достоинству.

HTML

<div id="scroll"> 
<div id="scrollContainer"> 
<ul> 
    <li><img src="http://placehold.it/350x350" alt="" /></li> 
    <li><img src="http://placehold.it/350x350" alt="" /></li> 
    <li><img src="http://placehold.it/350x350" alt="" /></li> 
    <li><img src="http://placehold.it/350x350" alt="" /></li> 
    <li><img src="http://placehold.it/350x350" alt="" /></li> 
</ul> 
</div> 

CSS

body { 
    margin: 0; 
} 
#scroll { 
    width: 100%; 
    overflow: hidden; 
} 
#scrollContainer * { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

JAVASCRIPT

$(document).ready(function() { 

    var $totalwidth = 0; 
    var $paneTarget = $('#scroll'); 
    var $paneContainer = $('#scrollContainer'); 
    var $this = $(this); 
    var $w = $this.width(); 

    $paneTarget.find('li').each(function() { 
     $totalwidth += $this.width(); 
     $paneContainer.width($totalwidth); 
    }); 

    $paneTarget.on('mousemove', function(e) { 
     if ((e.pageX) < $w/2) { 
      $paneTarget.stop().scrollTo({top:'0', left:'-=100'}, 200, {easing: 'linear'}); 
     } else if ((e.pageX) > ($w/2)) { 
      $paneTarget.stop().scrollTo({top:'0', left:'+=100'}, 200, {easing: 'linear'}); 
     } 
     else { 
      $paneTarget.stop(); 
     } 
    }); 

}); 

Answer 1

Я играл немного с скрипку и пришел с этим: Fiddle

Вместо использования плагина scrollTo или анимации jQuery я создал настраиваемый метод анимации, который вызывается с помощью setInterval.

// This gets called from the setInterval and handles the animating 
function animationLoop() { 
    var dx = targetX - posX, // Difference 
     vx = dx * EASING;  // Velocity 

    // Add velocity to x position and update css with new position 
    posX += vx; 
    $paneContainer.css({left: posX});    
} 

targetX обновляется в обработчике MouseMove

// Calculate the new x position for the scroll container 
targetX = Math.round((event.pageX/windowWidth) * maxScroll); 

[Редактировать]
Для обработки изменения размеров окна у вас есть в основном только для сброса WindowWidth и maxScroll переменные:

$(window).on('resize', function() { 
    windowWidth = $(window).width(); 
    maxScroll = -(containerWidth - windowWidth); 

    // OPTIONAL: 
    // Move scrollpane to original position on resize 
    targetX = 0; 
    // Start animating if it's not already 
    // Probably better in a new function: duplicate code from mousemove.. 
    if (!animInterval) { 
     animInterval = setInterval(animationLoop, 1000/FPS); 
    } 
}); 

Updated jsfiddle