수평 가속화 된 회전 목마 스크롤러

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