Javascript - Lisse parallaxe défilement avec la molette de la souris

De défilement à l'aide de la molette de la souris nécessite un traitement spécial. La raison d'être de chaque molette de la souris défilement ne pas faire défiler le contenu d'une certaine quantité de pixels. Chaque défiler les causes de votre page à sauter et puis chaque saut, les résultats dans le "jumpy" agités d'animation comme l'image de fond est en train d'essayer de se positionner lors de ces sauts.

À l'aide d'une bibliothèque de résoudre le problème la plupart du temps, mais il est également intéressant de comprendre quels sont les problèmes qu'il essaie de résoudre sous le capot.

Juste pour la référence à cause de lui, les événements de souris la roulette de la souris et DOMMouseScroll

Edit: Pendant le test, j'ai compris ce qui a un important bug. Alors que ma version se comporte (à mon avis) énormément mieux que le code d'origine, il n'est malheureusement pas en compte pour le défilement par d'autres moyens (barre de défilement/moyen-cliquez et faites glisser). Le défilement à l'une de ces méthodes, puis le défilement avec la molette de la souris provoque pour revenir à l'endroit où défilement emplacement vous étiez à la dernière fois que vous avez fait défiler la molette de la souris. Je vais mettre à jour quand je développe une solution à cette question.

Kenny référencé solution est une approche fine, mais c'est une fonctionnalité m'a rendu fou. Si vous faites défiler la roue rapidement, il ne serait pas faire défiler plus rapidement.

J'ai amélioré de telle sorte que vous faites défiler une distance donnée par clic indépendamment de la molette de la souris vitesse de rotation.

La raison, sa réponse n'a pas raison en est que si vous faites défiler la roue une seconde fois avant la première animation est terminée, la nouvelle faites défiler jusqu'à la hauteur est seulement le courant de défilement de la hauteur en plus même si ça défile par la roue de clic. (Si si faites défiler le temps est .5 secondes et vous faites défiler une deuxième fois après .25 secondes, puis faire défiler 1,5 fois la roue de défilement de la distance au lieu de 2 fois la distance)

Il est tard dans la nuit, j'espère qu'un sens.

Regradless voici mon code:

Les bibliothèques requises

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

De défilement code

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