Glatte vertikale Bildlauffunktion mit Mausrad und Bildlaufleiste

Question

Ich spiele herum und versuche eine Parallax-Website aufzubauen - ja, ich weiß, dass sie eine nervige Modeerscheinung sind, aber ich würde es trotzdem gerne ausprobieren. Zur Inspiration habe ich mir verschiedene Beispiele für gute Parallax-Websites angeschaut und bin auf diese eingegangen: https://victoriabeckham.landrover.com/INT.

Es hat reibungslose Scrolling mit dem Mausrad, Bildlaufleiste und Anker-Links. Ich habe nach jQuery-Plugins gesucht, die diesen Effekt erzielen, aber nur solche finden können, die interne Seitenlinks verwenden - Anker oder IDs (siehe unten) - aber nicht Mausrad und Bildlaufleiste. Es besteht eine gute Chance, dass ich mit den falschen Keywords suche. Kennt jemand die korrekte Terminologie, um diese Plugins zu finden oder irgendwelche Plugins zu kennen, die diesen Effekt erzielen würden?

Nebenbei, ich lerne gerade jQuery und Javascript, bin aber in den frühen Phasen - immer noch durch Codeacademy und noch nicht auf jeden echten Code gemacht. Im Moment spiele ich mit Plugins als eine Art zu lernen, aber hoffentlich kann ich in ein paar Monaten meine eigenen Sachen bauen!

Glatte Scrolling-Tags zu verankern oder IDs:

• http://archive.plugins.jquery.com/project/ScrollTo
• http://jsfiddle.net/9Amdx/7/
• http://arthurclemens.github.com/jquery-page-scroll-plugin/
• http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
• http://www.designova.net/scrollerbird/
• http://chris-spittles.co.uk/?p=462
• http://joelb.me/scrollpath/ (* mit freundlicher Genehmigung von @DrunkRocketeer)

Und ein weiteres Beispiel einer Parallaxe Website eine ähnliche Technik zum Scrollen mit:

• http://www.ascensionlatorre.com

Answer 1

versuchen diese. https://nicescroll.areaaperta.com/

Es hat

$().scrollTop() 

jQuery auch Ereignis-Listener so können Sie Scroll-Pfad mit Parallaxe Skript konfiguriert haben.

Answer 2

Ich glaube, Sie mehrere kombinieren müssen dieser Effekte, um etwas zu machen, das der Landrover-Site ähnelt. Ein Smooth-Scroll-Skript, ein Scroll-Pfad-Skript und ein Parallax-Skript.

Das ist ein interessanter Ort für den Pfad Element dieser Website: http://joelb.me/scrollpath/

Obwohl der beste Weg, um herauszufinden, wie diese Websites arbeiten, um sie zu untersuchen! Einige coole Seiten mit Parallax: http://www.awwwards.com/?s=parallax&post_type=all&search=Ok

Ich hoffe, das war etwas Hilfe/Inspiration!

Cheers, Robin