web-dev-qa-db-fra.com

Javascript - Défilement doux avec parallaxe avec molette de la souris

J'ai une page où j'applique un effet de parallaxe. Ceci est accompli en utilisant translate3d. Maintenant, alors que cela fonctionne bien, je me demande comment je peux remplacer les "étapes" par défaut lors du défilement avec la molette de la souris?

Si je fais défiler avec les barres de défilement, tout va bien. Mais avec la molette de la souris, tout est nerveux.

Je le fais d'une manière assez simple:

    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)");
        }

    });

Maintenant, j'ai vu ce site où le défilement est super lisse, également avec une molette de la souris avec des marches dessus. J'ai essayé de regarder le code, et il utilise requestAnimationFrame semble-t-il, mais comment il réalise cet effet de défilement exact, je ne suis pas sûr.

http://cirkateater.no/

Des idées?

javascriptcssscrollparallaxsmooth-scrolling
17
Kenny Bones

Après de nombreuses recherches, j'ai trouvé une solution assez simple:) http://bassta.bg/demos/smooth-page-scroll/

Chose intéressante, je n'ai pas du tout dû modifier mon code existant. Cela annule le comportement de défilement par défaut, tout en laissant l'événement ouvert pour que je puisse l'utiliser comme je le ferais normalement. 

19
Kenny Bones

Faire défiler à l'aide de la molette de la souris nécessite une manipulation spéciale. Reason étant chaque molette de la souris ne défile pas le contenu avec une certaine quantité de pixels. Chaque défilement provoque le saut de votre page, puis chaque saut entraîne une animation saccadée "instable" au moment où l'image d'arrière-plan tente de se positionner à ces sauts.

Utiliser une bibliothèque résoudra le problème la plupart du temps, mais il est également utile de comprendre quels problèmes elle tente de résoudre sous le capot.

Juste pour référence, les événements de souris sont mousewheel et DOMMouseScroll

2
pbojinov

Ce plugin pour Chrome fournit les fonctionnalités nécessaires à cela. Quelqu'un a créé un Gist avec une version minifiée . Cela provient d'une ancienne version, mais je pense que ça va, car, comme je l'ai vérifié, la dernière version du plugin ajoute trop de choses.

Quelques choses avec ce Gist cependant:

  • Il vérifie si le navigateur est Chrome avant de lancer.
  • Il commence automatiquement.
  • Il utilise jQuery.

Je me suis donc laissé créer une version qui réponde à ces points. Ajoutez simplement le script et appelez SmoothScroll.init() pour commencer.

1
Parziphal

Edit: Pendant les tests, j’ai réalisé que cela présentait un bogue important. Bien que ma version se comporte (à mon avis) énormément mieux que le code d'origine, elle ne prend malheureusement pas en compte le défilement par d'autres moyens (barre de défilement/clic du milieu et glisser). Le défilement selon l’une de ces méthodes, puis le défilement à l'aide de la molette de la souris, le ramènent à l'endroit où vous avez fait défiler la dernière molette de défilement. Je mettrai à jour lorsque je développerai une solution à cela.

La solution référencée de Kenny était une bonne approche, mais sa fonctionnalité m'a rendu fou. Si vous faites défiler la molette rapidement, vous ne ferez pas défiler beaucoup plus rapidement. 

Je l'ai amélioré pour que vous puissiez faire défiler une distance donnée par clic quelle que soit la vitesse de rotation de la molette de la souris.

La raison de sa réponse est que si vous faites défiler la molette une seconde fois avant la fin de la première animation, le nouveau défilement en hauteur correspond uniquement à la hauteur de défilement actuelle, plus le nombre de défilés par clic de molette. (Donc, si le temps de défilement est de 0,5 seconde et que vous faites défiler une seconde fois après 0,25 seconde, il défilera 1,5 fois la distance de défilement de la roue au lieu de 2 fois cette distance)

Il est tard dans la nuit, j'espère que cela a du sens.

Regradless voici mon code:

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>

Code de défilement

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

Excellente question.

La bibliothèque que j'utilise est la suivante: https://github.com/cferdinandi/smooth-scroll

Incluez simplement le fichier smoothscroll.js et le travail effectué. La molette de la souris glissera doucement dans la page, au lieu de sauter par blocs de pixels.

Cela améliore vraiment l'apparence des pages Web de parallaxe.

Btw, pour les images de parallaxe, j'utilise cette bibliothèque:

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

Il est très facile d'ajouter une page Web. N'oubliez pas d'inclure et d'initialiser cette bibliothèque en bas de votre page Web, après vos images et le HTML.

(Je n'avais pas réalisé que cela ferait une différence, mais c'est le cas!)

0
Mike Gledhill