Frage HTML 5 unabhängiges Scrollen für perspektivische Illusion


Gibt es einen Beispiel-HTML-Code, der den folgenden Effekt feststellt:

Es gibt eine Vordergrundebene, die Text und Bilder enthält. Dann gibt es eine Hintergrundebene, die ein Bild anzeigt,

Wenn der Benutzer die Seite scrollt, scrollt der Vordergrund mit normaler Geschwindigkeit, aber der Hintergrund mit einer niedrigeren Geschwindigkeit.

Dies würde eine Flintstones-ähnliche Fauxperspektive erzeugen.


5
2018-03-02 14:35


Ursprung


Antworten:


Diese "falsche Perspektive", von der du sprichst, heißt Parallaxe.

Es gibt eine Reihe von Demos online verfügbar

Ich würde vorschlagen, ein Hintergrundbild zu verwenden body mit background-attachment: fixed und stellen Sie dann einen kurzen Timer ein, um die Seitenrollenlänge zu prüfen.

Ermitteln Sie bei jeder Aktualisierung des Timers die Scrolllänge und multiplizieren Sie sie mit einem Modifikator (zB 0,1). Setzen Sie diesen neuen Wert als background-position:

$body = $('body');

function parallax()
{
  var pageOffsetX, pageOffsetY, modifiedOffsetX, modifiedOffsetY;

  pageOffsetX = ...//get the offset
  pageOffsetY = ...//get the offset
  modifiedOffsetX = pageOffsetX * 0.1;
  modifiedOffsetY = pageOffsetY * 0.1;

  $body.css('background-position', modifiedOffsetX + 'px ' + modifiedOffsetY + 'px');
  setTimeout(parallax, 100);
}

parallax();

Der Modifikator gibt an, um wie viel sich der Hintergrund für jeden px, den der Benutzer scrollt, verschieben sollte. Möglicherweise müssen Sie die Offsets anpassen, wenn sich der Hintergrund nicht wiederholen soll, und Sie müssen möglicherweise den Offset abhängig davon, wie Sie die pageOffset-Werte erhalten, negieren.

Durch Anpassen des Zeitlimits wird die Reaktionszeit des Hintergrunds geändert. Möglicherweise können Sie ein Maus-Scroll-Ereignis erfassen, aber Sie müssen auch prüfen, ob ein Benutzer über einen Link usw. auf die Seite gesprungen ist.


7
2018-03-02 14:51



Die Art und Weise, wie ich dies erreichen würde, ist zuerst durch Einstellung background: fixed für die Seite, und dann ständig die Seite abfragen, um festzustellen, ob window.pageYOffset Wert hat sich geändert [1]. Wenn es sich geändert hat, können Sie das Hintergrundbild dann um (die Hälfte | ein Drittel | ein Viertel | was auch immer) nach oben oder unten verschieben, um den Effekt nachzuahmen, von dem Sie sprechen.

Ich werde nicht versuchen, dies zu programmieren, aber ich wäre sehr interessiert, Ihr Ergebnis zu sehen.

[1] Hinweis: Tun Sie dies NICHT, indem Sie dem Ereignis pagescroll ein Ereignis hinzufügen ernsthaft die meisten Browser vermasseln, wie Twitter den harten Weg erlernt hat.


1
2018-03-02 14:44



Das sind nicht die Droiden, die Sie suchen, aber der letzte Effekt ist sehr ähnlich: http://webdev.stephband.info/parallax.html 

Diese Ebenen bewegen sich als Antwort auf die Maus und bewegen sich abhängig von ihren Dimensionen (und den Optionen für die Ebeneninitialisierung) in unterschiedlicher Weise, in einer Art Parallaxie.

Vielleicht möchten Sie damit herumspielen und es so einstellen, dass der Parallaxeffekt nur horizontal ist (stellen Sie die Option ein) xparallax:false).


0
2018-03-02 14:43