Плавный горизонтальный скролл
Ребят, пытаюсь сделать плавную горизонтальную прокрутку зависящую от положения курсора. Но анимация у меня вышла подтормаживающая, а я точно видел подобные штуки передвигающиеся плавно и красиво. Подскажите кто знает, как сделать правильнее/красивее. Вот мой способ:
{
var lastX = 0; //последняя координата x мыши
var SliderScroll= false; //требуется ли анимация?
$(document).mousemove(function(e) {
lastX = e.clientX; //обновили горизонтальное положение курсора
});
//как только курсор оказывается в элементе news-slider начинаем анимацию прокрутки
$(".news-slider").mouseenter(function(e) {
SliderScroll= true;
NewsSliderScroll();//запуск самой анимации
});
$(".news-slider").mouseleave(function(e) {
SliderScroll= false;//сбрасываем для выхода из рекурсии
});
function NewsSliderScroll() {
setTimeout(function() {
var speed = (0.5 - ($(window).width() - lastX) / $(window).width()).toFixed(2);//не суть важно, нужно для расчета шага прокрутки
var step = $(".news-slider").scrollLeft() + 200 * speed;//шаг прокрутки
$(".news-slider").stop().animate({ scrollLeft: step }, 100); // останавливаем предыдущую анимацию и сразу же запускаем следующую. на скрол шага 100 милисекунд
if (SliderScroll) NewsSliderScroll();//рекурсивно вызываем саму себя
},100);//все это дело запускаем с отсрочкой в 100 мс, требующиеся на анимацию.
}
}
Само собой в момент .stop() и запуска новой анимации элемент слегка "дергается". Попытка уменьшить таймер запуска между анимациями от "лагов" не избавил( Подскажите,кто знает, как сделать анимацию плавной? |