Javascript - Плавная прокрутка параллакса с колесом мыши

У меня есть страница, где я применяю эффект параллакса. Это достигается с помощью translate3d. Теперь, когда это работает хорошо, мне интересно, как я могу переопределить "шаги" по умолчанию при прокрутке с помощью колеса мыши?

Если я прокручиваю полосы прокрутки, все в порядке. Но с колесиком мыши все это нервно.

Я делаю это довольно прямолинейно:

    var prefix = Modernizr.prefixed('transform');
    $window.on('scroll', function(){
        var scroll_top = $window.scrollTop();
        if(scroll_top < forside_infographics_offset){
            $_('#slider').css(prefix , "translate3d(0,"+(scroll_top/3)+"px,0)");
        }

    });

Теперь, я видел этот сайт, где прокрутка супер гладкая, также с колесиком мыши с шагами на нем. Я попытался посмотреть код, и он, используя requestAnimationFrame, кажется, но как он справляется с этим эффектом прокрутки, я не уверен.

http://cirkateater.no/

Любые идеи?

Ответ 1

После большого количества исследований я нашел довольно простое решение:) http://bassta.bg/demos/smooth-page-scroll/

Интересно, что мне не пришлось менять свой существующий код вообще. Это переопределяет поведение прокрутки по умолчанию, оставляя событие открытым для меня, как обычно.

Ответ 2

Прокрутка с помощью колеса мыши требует специальной обработки. Причина, по которой каждая прокрутка колеса мыши не прокручивает контент на определенное количество пикселей. Каждый свиток заставляет вашу страницу прыгать, а затем каждый прыжок приводит к "дрожащей" дрожащей анимации, поскольку фоновое изображение пытается позиционировать себя при этих прыжках.

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

Только для справки события мыши mousewheel и DOMMouseScroll

Ответ 3

Этот плагин для Chrome предоставляет необходимые для этого функции. Кто-то создал суть с мини-версией. Это из довольно старой версии, но я думаю, что это прекрасно, потому что, как я уже проверял, последняя версия плагина добавляет слишком много материала.

Пара вещей с этим сущностью, хотя:

Он проверяет, является ли браузер Chrome до его запуска.
Инициируется автоматически.
Он использует jQuery.

Итак, я позволил себе создать версию, которая обращается к этим точкам. Просто добавьте script и вызовите SmoothScroll.init() для запуска.

Ответ 4

Изменить: во время тестирования я понял, что это имеет существенную ошибку. Хотя моя версия ведет себя (по моему мнению) значительно лучше исходного кода, к сожалению, она не учитывает прокрутку другими способами (полоса прокрутки/средний клик и перетаскивание). Прокрутка одним из этих методов, а затем прокрутка с помощью колеса мыши приводит к тому, что он возвращается к месту нахождения прокрутки, на котором вы были, когда вы в последний раз прокручивали колесико мыши. Я буду обновлять, когда я разработаю для этого решение.

Решение, связанное с Kenny, было прекрасным подходом, но его функциональность сводила меня с ума. Если вы быстро прокрутите колесо, это не будет прокручиваться намного быстрее.

Я улучшил его таким образом, чтобы вы прокручивали заданное расстояние за клик независимо от скорости отжима колесика мыши.

Причина, по которой его ответ не был вызван, состоит в том, что если вы прокрутите колесо во второй раз до завершения первой анимации, новая прокрутка к высоте будет только текущей высотой прокрутки плюс сколько бы она ни прокручивалась за клик. (Так что если время прокрутки составляет 0,5 секунды, и вы прокручиваете второй раз через 0,25 секунды, тогда он будет прокручивать в 1,5 раза больше прокрутки колеса вместо 2-кратного расстояния)

Это поздно ночью, я надеюсь, что это имеет смысл.

Без кода здесь мой код:

Необходимые библиотеки

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

Код прокрутки

<script>
    $(function(){   
        var $window = $(window)
        var $scoll = $('#page-container')
        var scrollTime = 0.5
        var scrollDistance = 120

        var scrollTop = $scoll.scrollTop()

        $window.on("mousewheel DOMMouseScroll", function(event){

            event.preventDefault()  

            var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3
            scrollTop = scrollTop - parseInt(delta*scrollDistance)
            scrollTop = Math.max(0, Math.min($scoll[0].scrollHeight, scrollTop))

            TweenMax.to($scoll, scrollTime, {
                scrollTo : { y: scrollTop, autoKill:true },
                    ease: Power1.easeOut,
                    overwrite: 5                            
                })

        })
    })
</script>

Ответ 5

Отличный вопрос.

Библиотека, которую я использую, такова: https://github.com/cferdinandi/smooth-scroll

Просто включите файл smoothscroll.js и выполните выполненную работу. Теперь колесо мыши будет плавно перемещаться по странице, а не прыгать вниз в кусках пикселей.

Это действительно улучшает внешний вид веб-страниц параллакса.

Btw, для изображений с параллаксом я использую эту библиотеку:

https://github.com/pederan/Parallax-ImageScroll

На веб-страницу очень легко добавить, просто не забудьте включить и инициализировать эту библиотеку в нижней части веб-страницы, после ваших изображений и HTML.

(я не понимал, что это изменит ситуацию, но это абсолютно так!)