Effet de défilement fluide avec la molette de la souris

Question

Je suis récemment tombé sur ce site web http://www.ascensionlatorre.com/home Et j'adore la façon dont fonctionne le défilement à l'aide de la molette de la souris - l'assouplissement est très doux.

J'ai fait des recherches sur Google mais je n'ai rien trouvé de semblable.

Quelqu'un a-t-il des suggestions pour reproduire cet effet avec jQuery ?

Answer 1

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

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

http://areaaperta.com/nicescroll/

Answer 2

http://areaaperta.com/nicescroll/

c'est vraiment le script à vérifier. Bien qu'il ajoute une barre de défilement personnalisée, il s'agit d'une barre esthétique que vous pouvez modifier par le biais de css.

EDIT J'avais une démo qui fonctionnait mais je l'ai supprimée suite à des changements d'hébergement et de domaine, désolé pour cela.

Answer 3

Ok mon pote, je vais essayer de répondre à ta demande avec un peu de matériel. J'ai trouvé ce tutoriel pour moi, j'espère qu'il vous sera utile aussi. C'est la base du site auquel vous faites référence : http://johnpolacek.github.com/scrollorama/

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

Answer 4

J'ai la même question que vous. Je visite le site web que vous avez indiqué 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 "mousewheel" pour trouver une fonction appelée "scroll". La raison de la fluidité du défilement est qu'ils n'ont pas utilisé la fonction "jquery". n'ont pas utilisé animate de jquery, mais plutôt setInternal de javascript pour le faire. pour le réaliser. Vous pouvez vous inspirer de ce code.

Je crois que vous pouvez y arriver.

Answer 5

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

transition: all 1s

sur votre élément (préfixe vendeur bien sûr), permet d'adoucir les animations des effets de parallaxe.

Il semble qu'ils aient surchargé le comportement de la scrollWheel et fait en sorte que chaque tic descende la page d'une quantité déterminée. C'est du moins l'approche que j'adopterais.