M7: Effekt der Spotify-Seite

Hallo,

vor kurzem bin ich durch Zufall nochmal auf die Spotify-Seite (Klick) gekommen und habe dort den Effekt gesehen, dass im Vordergrund schmale "Balken" mit Informationen schneller gescrollt werden, als die Hintergrundbilder. Zudem ändert sich das Hintergrundbild nach jedem dieser Informationsbalken.
Diesen Effekt würde ich gerne für meine eigene Seite übernehmen, habe jedoch kaum Anhaltspunkte, wie ich in nachbauen könnte.
Ich glaube, es hat etwas mit den Elementen div "scroller-main" und section "section-listen-everywhere" zu tun, aber viel weiter komme ich mit den Quelltext nicht.

Kann mir da jemand behilflich sein?

Vielen Dank und viele Grüße
M7

  1. vor kurzem bin ich durch Zufall nochmal auf die Spotify-Seite (Klick) gekommen und habe dort den Effekt gesehen, dass im Vordergrund schmale "Balken" mit Informationen schneller gescrollt werden, als die Hintergrundbilder. Zudem ändert sich das Hintergrundbild nach jedem dieser Informationsbalken.

    Kann das zwar gerade nicht finde, aber ich fühlte mich durch Deine Beschreibung an den Parallaxeneffekt erinnert. Da gibts was für jquery. Ansonsten mal googlen nach "parallax scroll"

    Cheers,
    Baba

    1. Ah, jetzt kapiert. Ja, fällt unter parallax. Hier ist etwas passendes. Sogar der Fallback ohne JS sieht akzeptabel aus.

      [[ PS: OHNE JS HAT MAN KEINE BUTTONS ÜBER DER BEITRAGSFORM ]]

      Cheers,
      Baba

      1. Hallo,

        [[ PS: OHNE JS HAT MAN KEINE BUTTONS ÜBER DER BEITRAGSFORM ]]

        ja, das ist bekannt und gewollt - oder zumindest in Ordnung. Die damit verknüpfte Funktionalität wird ausschließlich durch Javascript bereitgestellt.
        Ich wundere mich jedesmal, wenn ich das Forum mal an einem fremden Rechner aufrufe, was diese merkwürdigen Buttons da sollen, wo man doch die link- oder code-Tags viel schneller von Hand eingibt.  ;-)

        Ciao,
         Martin

        --
        F: Was macht ein Offizier, der in der Nase bohrt?
        A: Er holt das Letzte aus sich heraus.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. ja, das ist bekannt und gewollt - oder zumindest in Ordnung. Die damit verknüpfte Funktionalität wird ausschließlich durch Javascript bereitgestellt.

          Achja, sorry.

          wo man doch die link- oder code-Tags viel schneller von Hand eingibt.  ;-)

          Ist das so :)

          Cheers,
          Baba

          1. Hi,

            wo man doch die link- oder code-Tags viel schneller von Hand eingibt.  ;-)
            Ist das so :)

            ich finde schon. Beim Schreiben eines Beitrags habe ich beide Hände an der Tastatur. Bis ich da erstmal wieder die Maus in die Hand nehme, hab ich das Zeug schon längst getippt.
            Einziges Handicap: Man muss die Syntax kennen. Für Gelegenheits-Forennutzer also keine Option.

            Ciao,
             Martin

            --
            Noch Fragen? - Ich weiß es auch nicht.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. ich finde schon.

              Ich glaube das ist eher gefühlt.

              Beim Schreiben eines Beitrags habe ich beide Hände an der Tastatur.

              Ich auch.

              Ich habe es gerade mehrmals durchexerziert (Link in der Zwischenablage vorausgesetzt). Schreibe einen Text, markiere ein oder mehrere Wörter mit STRG + SHIFT + Pfeil n. links, Klicke auf "Link", STRG + V, Enter, weitertippen vs. Syntax gleich eingeben, wobei ich Syntax vorher geübt habe und Link mit STRG-V einfliessen lasse.

              Ergebnis: Klickmethode sehr viel schneller. Ich glaube nicht, dass jemand das mit Tippen schneller kann, als ich das mit einem Mausklick kann. Ich würde wetten :)

              Ich schreibe übrigens auch mit beiden Händen auf der Tastatur. Ich hoffe dieser Screenshot ist für euch noch erreichbar. Es ist ein Ergebnis meines first try Messens :)

              Cheers,
              Baba

              1. n'Abend ...

                ich finde schon.
                Ich glaube das ist eher gefühlt.

                natürlich ist es das, belastbare Messungen kann ich nicht bieten.

                Ergebnis: Klickmethode sehr viel schneller. Ich glaube nicht, dass jemand das mit Tippen schneller kann, als ich das mit einem Mausklick kann. Ich würde wetten :)

                Ich weiß nicht, ob ich mich auf die Wette einlassen möchte - aber ich weiß, dass bei mir etwa 3..5 Sekunden mit dem Auffinden des Mauszeigers ins Land gehen. Hand an die Maus, ein bisschen wackeln, am Bildschirm suchen, wo etwas zappelt. Wo ist der Mauszeiger? Verdammt, wo isser denn? - Und der kann sich auf einer Fläche von 2820x1200px irgendwo aufhalten, die sich auf zwei Bildschirme verteilt.

                Ich schreibe übrigens auch mit beiden Händen auf der Tastatur. Ich hoffe dieser Screenshot ist für euch noch erreichbar. Es ist ein Ergebnis meines first try Messens :)

                Derartige Zahlen kann ich nicht vorweisen - nur so als Abschätzung: Wenn jemand langsam redet, komme ich mit dem Tippen einigermaßen hinterher. Bei normalem Sprechtempo nicht mehr ganz.
                Interessant finde ich dabei, dass das Tastaturlayout anscheinend besser auf die englische als auf die deutsche Sprache passt. Englisch schreibe ich flüssiger und mit weniger Stocken oder Zögern als Deutsch, da passt die Verteilung der Buchstaben einfach besser.

                Ciao,
                 Martin

                --
                Krankenschwester zum fassungslosen Vater von Drillingen: Nein, Sie sollen sich keins aussuchen! Alle drei sind Ihre!
                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            2. Bis ich da erstmal wieder die Maus in die Hand nehme, hab ich das Zeug schon längst getippt.

              Bei Touch-Geräten gibt es keine Maus, sodass der Abstand zwischen Bildschirmtastatur und Button ein paar Zentimeter betrifft. Bei Geräten mit Touchpad unter der Tastatur beträgt der Abstand ebenso ein paar Zentimeter, sodass bloß ein Finger, z.B. der Daumen, kurz gezogen und der Button per Tap aktiviert werden muss.

              Mathias

              1. Hallo,

                Bis ich da erstmal wieder die Maus in die Hand nehme, hab ich das Zeug schon längst getippt.
                Bei Touch-Geräten gibt es keine Maus, sodass der Abstand zwischen Bildschirmtastatur und Button ein paar Zentimeter betrifft.

                richtig, bei Touch-Geräten sieht das wieder sehr viel günstiger aus. Solche Geräte besitze und/oder benutze ich aber nicht, und ich sprach ja nur davon, wie *ich* die Situation empfinde.

                Bei Geräten mit Touchpad unter der Tastatur beträgt der Abstand ebenso ein paar Zentimeter, sodass bloß ein Finger, z.B. der Daumen, kurz gezogen und der Button per Tap aktiviert werden muss.

                Ja, aber das Hauptproblem, das ich ja auch erläutert habe (nämlich nicht das Ergreifen der Maus an sich, sondern das Auffinden des Mauszeigers) besteht da ebenso wie bei Geräten mit konventioneller Maus. Frei nach Murphy's Law steht der Mauszeiger ja immer an einer Stelle, wo man ihn gerade am wenigsten erwartet - auch wenn man ihn nur eine Minute zuvor dort "geparkt" hat.

                Ciao,
                 Martin

                --
                Frage an Radio Eriwan: Kann man eigentlich ein guter Kommunist und gleichzeitig ein guter Christ sein?
                Radio Eriwan antwortet: Im Prinzip ja - aber warum sollte man sich das Leben doppelt schwer machen?
                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(