Показать сообщение отдельно
  #1 (permalink)  
Старый 23.11.2015, 11:45
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Плавный горизонтальный скролл
Ребят, пытаюсь сделать плавную горизонтальную прокрутку зависящую от положения курсора. Но анимация у меня вышла подтормаживающая, а я точно видел подобные штуки передвигающиеся плавно и красиво. Подскажите кто знает, как сделать правильнее/красивее. Вот мой способ:
{
    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() и запуска новой анимации элемент слегка "дергается". Попытка уменьшить таймер запуска между анимациями от "лагов" не избавил( Подскажите,кто знает, как сделать анимацию плавной?
Ответить с цитированием