Wie erzielt diese Seite den Ästhetischen Scroll Effekt?

[Weronek]

Hallo zusammen!

Ich weis, scroll hijacking ist ein umstrittenes Thema, ich benötige aber einen bestimmten Effekt für ein Projekt. Bevor ich jetzt lange versuche es zu beschreiben, hier ist eine Seite die genau das umgesetzt hat: www.smpl.de. Smoothes Scrollen selbst mit einem Mausrad und immer ein leichtes abebben der Bewegung statt einem aprupten abstoppen (ich spreche von der Desktop Version nicht mobil).

Ich habe es selber einige Stunden versucht, zum Beispiel indem ich kleine Zwischenschritte definiert habe zu denen immer hinges scrollt wird mit jquery animate oder indem ich die scroll Bewegung durch css transforms ersetzt habe, aber das war alles weit weg vom gewünschten Ergebnis. Hat jemand einen Tipp?

Eine Library wäre in Ordnung, das Projekt ist sehr schlank, jQuery dependency wäre auch kein Problem. Vielen Dank für eure Aufmerksamkeit!


LG Weronek

 

[mikdoe]

hier ist eine Seite die genau das umgesetzt hat: www.smpl.de. Smoothes Scrollen selbst mit einem Mausrad und immer ein leichtes abebben der Bewegung statt einem aprupten abstoppen (ich spreche von der Desktop Version nicht mobil).

Das heißt, ich sehe den Effekt nur in einer ganz bestimmten Hardware-Konstellation, sehe ich das richtig? Mit Surface Tablet Win10 Crome Desktop Touch Display (ist kein mobile!) sehe ich nämlich überhaupt keinen Effekt, scrollt ganz normal.
Hast du dort auf deren Seite mal in die Quellen geguckt?

 

[Weronek]

Das heißt, ich sehe den Effekt nur in einer ganz bestimmten Hardware-Konstellation, sehe ich das richtig?

Nein, der ist an sich überall aktiv (auch auf mobilen Geräten). Man sieht ihn, wenn man mobile Browser benutzt oder generell Browser über Touch bedient nicht wirklich. Richtig sichtbar ist es beim bedienen mit der Maus. Ich habe versucht mich durch das js zu schlagen, da ist aber einiges drin und ich konnte es nicht identifizieren. Wenn jemand einen Tipp hat wie ich beim identifizieren gut vorgehe wäre das auch super wertvoll! Im Moment suche ich mich so durch den Code und schaue nach Event listeners die auf scroll hören, aber entweder ohne Erfolg oder ich checke den Code dahinter einfach nicht

 

[NipponDaniel]

Du meinst den ease Scroll effect?

das geht mit der Jquery.easing library.

<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

Codebeispiel: Edit fiddle - JSFiddle - Code Playground

ergänzend braucht man noch die jquery standardlibrary

ich habs mit touch noch nicht getestet. Die Intensität des Effects steuert man in dem Beispiel im JS, in der "handle" function mit den Variablen time und distance. Das geht bestimmt auch mit ohne library. Vielleicht mit Transition, easeIn, easeOut und setTimeout, aber ich habe die library schneller gefunden als das selbst zu coden. hoffe das es hilft. lg

[edit]
PS:
Ich denke du kannst besser Code identifizieren als ich. Bei Scroll hab ich aber schnell aufgegeben. Das Stichwort easing ist mir nur zufällig gerade eingefallen, da ich die Tage bei Coding Train eine Variable gesehen habe, die einen ähnlichen Effect tweakt.