web-dev-qa-db-fra.com

Effet d'accélération du défilement fluide avec la molette de la souris

Je suis récemment tombé sur ce site http://www.ascensionlatorre.com/home , et j'adore le fonctionnement du défilement de la molette de la souris - l'assouplissement est très fluide.

J'ai recherché Google, mais je ne trouve rien de similaire.

Quelqu'un at-il des suggestions sur la façon de reproduire cet effet avec jQuery?

39
idbranding

J'ai récemment rencontré ce problème également et je n'y trouvais pas beaucoup de soutien, j'ai donc rapidement oublié le problème. Quelques mois plus tard, j'ai vu un meilleur exemple de défilement fluide, alors je suis entré et j'ai fouillé les fichiers JavaScript qu'ils utilisaient et j'ai découvert qu'ils utilisaient un fichier jQuery appelé NiceScroll.

Je crois que c'est ce que nous recherchions tous les deux: un simple défilement fluide pour les divs, les iframes ou autre chose, un peu comme le défilement iOS.

http://areaaperta.com/nicescroll/

24
Dylan

http://areaaperta.com/nicescroll/

c'est certainement le script à vérifier. Bien qu'il ajoute une barre de défilement personnalisée, c'est une belle apparence que vous pouvez modifier via css.

[~ # ~] modifier [~ # ~] J'ai eu une démo fonctionnelle mais je l'ai depuis supprimée en raison de changements d'hébergement et de domaine, désolé.

8
hellojebus

Okay mec, je vais essayer d'aider sur votre demande avec du matériel. J'ai trouvé ce tutoriel pour moi, j'espère qu'il vous sera utile aussi. Cela constitue la base du site auquel vous faites référence: http://johnpolacek.github.com/scrollorama/

http://johnpolacek.github.com/scrolldeck.js/

6
Panshul

J'ai la même question que vous avez posée. Je visite le site Web que vous avez fourni et je trouve la réponse!

Ils ont utilisé jquery.mousewheel.js, et vous pouvez utiliser la console de Chrome pour trouver le script. Il suffit de rechercher "molette" et vous pouvez trouver une fonction appelée "défilement". La raison du défilement fluide est qu'ils n'ont pas utilisé l'animation de jquery, mais l'utilisation de setInternal de javascript pour le faire. Vous pouvez apprendre du code.

Je crois que vous pouvez y arriver.

5
Winters

Je n'ai pas plongé dans le code, mais je soupçonne qu'ils utilisent des transitions CSS3.

transition: all 1s

Sur votre élément (fournisseur préfixé bien sûr), lissera les animations des effets de parallaxe.

Il semble qu'ils aient outrepassé le comportement de la molette de défilement et ont fait descendre chaque tick de la page d'un montant déterminé. C'est ainsi que j'aborderais au moins cela.

2
eighteyes