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

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

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

РЕДАКТИРОВАТЬ: Это действительно плохая идея. Никогда не перехватывайте и не переопределяйте ожидаемое поведение. Наверное, тогда я был слишком увлечен анимацией и перестарался со всем. К счастью, мы все учимся и расширяем наше представление о хороших принципах UX :)

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

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

Просто для справки, события мыши: mousewheel и DOMMouseScroll

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

Пара вещей с этой сутью:

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

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

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

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

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

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

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

Regradless вот мой код:

Требуемые библиотеки

<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>

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

Я использую вот эту библиотеку: https://github.com/cferdinandi/smooth-scroll.

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

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

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

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

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

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

Я знаю, что опаздываю, но сегодня я исследовал тему плавной прокрутки после того, как наткнулся на I Love me Wellness. ' сайт. Анализируя JavaScript сайтов, я обнаружил, что они используют сценарий vanillaJS под названием Luxy.js, который демонстрируется по адресу Luxy. js на GitHub. Я нахожу эффект довольно приятным. Я не думаю, что это очень плохая идея, если ее хорошо реализовать. И это очень легко реализовать.