Ergebnis 1 bis 4 von 4
  1. #1
    Weronek ist offline Grünschnabel
    registriert
    08-08-2020
    Beiträge
    2

    Wie erzielt diese Seite den Ästhetischen Scroll Effekt?

    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

  2. #2
    Avatar von mikdoe
    mikdoe ist gerade online Administrator
    registriert
    01-05-2010
    Beiträge
    7.779

    AW: Wie erzielt diese Seite den Ästhetischen Scroll Effekt?

    Zitat Zitat von Weronek Beitrag anzeigen
    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  3. #3
    Weronek ist offline Grünschnabel
    registriert
    08-08-2020
    Beiträge
    2

    AW: Wie erzielt diese Seite den Ästhetischen Scroll Effekt?

    Zitat Zitat von mikdoe Beitrag anzeigen
    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 😅

  4. #4
    NipponDaniel ist offline Grünschnabel
    registriert
    10-08-2020
    Beiträge
    5

    AW: Wie erzielt diese Seite den Ästhetischen Scroll Effekt?

    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.
    Geändert von NipponDaniel (10-08-2020 um 22:39 Uhr)

Ähnliche Themen

  1. allgemeiner jquery scroll-in-effekt
    Von terbaik im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 31-01-2010, 16:49
  2. Diese Seite als Bookmark speichern
    Von skiordie im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 05-03-2007, 11:55
  3. Finde diese Seite super
    Von sarah.h im Forum Site-Check
    Antworten: 11
    Letzter Beitrag: 13-07-2005, 13:18
  4. -==Check diese coole Seite==-
    Von Jenny im Forum Site-Check
    Antworten: 45
    Letzter Beitrag: 18-10-2002, 23:30
  5. Ist diese Seite im Frame - Script Frage
    Von Matthias im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 26-01-2001, 19:04

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •