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 Кажется, но как он выполняет этот эффект прокрутки excact, я не уверен.

http://cirkateater.no/

какие идеи?

17
css javascript parallax scroll smooth-scrolling

5 ответов

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

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

19

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

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

только для справки, события мыши являются колесо и DOMMouseScroll

2

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

пара вещей с этой сутью, хотя:

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

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

1

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

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

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

причина, по которой его ответ не был, потому что если вы прокручиваете колесо во второй раз, прежде чем первая анимация будет завершена, новая прокрутка на высоту - это только текущая высота прокрутки плюс сколько бы он ни прокручивался за клик колеса. (Так что если время прокрутки .5 секунд, и вы прокручиваете второй раз после .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>
0

большой вопрос.

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

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

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

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

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

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

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

0