스크롤이있는 원형 슬라이더 (jquery + css3)

Question

스크롤하는 원형 슬라이더를 만듭니다. http://magart.com.ua/circle/ Mozilla에서 테스트되었습니다!

페이지를 새로 고침하면 모든 것이 부드럽게 처리됩니다. (페이지를 스크롤하고 새로 고침해야 볼 수 있습니다). 모질라에서 테스트되었습니다! 그러나 스크롤하면 거칠음이 나타납니다. 문제를 해결하는 데 도움을주십시오. 미리 감사드립니다! 코드의

부 : 난 그냥 jQuery를 배우고

myDiv.scroll(function() { 
     $newh=$('#wrapper_sl').height()+$(this).scrollTop(); //eternal scroll 
     $('#wrapper_sl').height($newh); //eternal scroll 
     var $nower=(($(this).scrollTop()+$start_pr)/$skorost)+$ugol*8; 
     for (var ink=0, len = $kolvo; ink < len; ink++) 
     { 
     $rad=((ink)*$ugol+$nower); 
     $deg=$rad*360/(2*Math.PI)+270; 

     $(ImgDiv[ink]).offset({top: Math.cos(($rad))*$size_dug+$smes_y, left: Math.sin(-($rad))*($size_dug)+$smes_x }).css({'transform':'skewX(-'+$deg+'deg) rotateX('+$deg+'deg)'}); 
     }; 
    }); 

. 이해해주세요. =)

Answer 1

css3 전환에 약간의 시간을 주려고합니다.

transition: all 0.5s; 
-webkit-transition: all 0.5s; 
-moz-transition: all 0.5s; 

또한 영원한 스크롤 부분은 래퍼 높이를 늘리므로 스크롤 할 때마다 회전 속도가 빨라집니다. 래퍼의 높이를 변경하지 않고 각 스크롤을 수행 한 후 scrolltop을 0으로 설정합니다.

- 편집

이 정보가 도움이되기를 바랍니다. 여기 jsFiddle

$(function() { 
    rotate(); 
    myDiv.bind('scroll.rot', rotate); 
    myDiv.bind('scroll', $.debounce(250, function() { 
     $start_pr += $(this).scrollTop(); 
     $(this).scrollTop(0); 
    })); 
}); 

function rotate() { 
    $.debounce(250, true, function() {}); 
    var $nower = (($(this).scrollTop() + $start_pr)/$skorost) + $ugol * 8; 
    for (var ink = 0, len = $kolvo; ink < len; ink++) { 
     $rad = ((ink) * $ugol + $nower); 
     $deg = $rad * 360/(2 * Math.PI) + 270; 

     $('#info').html(
      '$rad: ' + $rad + 
      '<br/>$deg: ' + $deg); 

     $(ImgDiv[ink]).offset({ 
      top: Math.cos(($rad)) * $size_dug + $smes_y, 
      left: Math.sin(-($rad)) * ($size_dug) + $smes_x 
     }).css({ 
      'transform': 'skewX(-' + $deg + 'deg) rotateX(' + $deg + 'deg)' 
     }); 
    }; 
} 

에서 데모를 참조하는 것은 실제로 파이어 폭스에서 문제를 볼 수 없습니다 jsFiddle