Parallax - Distanz zum oberen Div, anstatt zu dem Seitenanfang

[bugles]

Guten Tag,
für ein Studienprojekt habe ich mich dazu verpflichtet eine Seite zu schreiben und soweit geht es auch ganz gut voran. Die Hauptfunktionen klappen soweit ganz gut, jedoch ist da noch eine Sache, die noch absolut nicht funktioniert. Die Parallax Funktion. Das Styling bzw. das Design ansich kommt erst danach.

Selbst habe ich quasi keine Ahnung von Javascript und ich freue mich immer, wenn es da draußen Lute gibt, die Ihre Scripts freigeben und erklären, warum sie wie etwas getan haben. So habe ich auch dieses Tutorial gefunden - https://medium.com/@PatrykZabielski...n-with-css-javascript-2b56883c3f27#.2dgfszelk

Die Illustrationen runtergeladen für Testzwecke und eingerichtet. Soweit funktioniert es auch we angedacht, aber ich möchte einen Schritt weiter gehen. Zur Erklärung. Zum Start eröffnet eine große Illustration die Seite und man scrollt normal runter. Nach ein wenig Content erscheint das nächste Bild, welches mit einem Parallax Effekt verknüpft ist. Die Seite soll quasi den Abstieg in eine Höhle symbolisieren. Die Startseite soll soll ein Eye Candy werden - alle weiteren werden statisch.

Jetzt erstmal mein aktueller Stand:
Insight (bitte verzeiht mir die tinyurl - ich möchte nicht, dass die url von google und co gefunden wird)

Wie ihr seht, klappt es - jedoch nicht die zweite Illustration.
Ich habe die letzten 4 Tage daran rumprobiert mit meinen spärlichen Javascript Kenntnissen daran was zu ändern, jedoch bin ich schon zu der Erkenntnis gekommen, wo das Problem liegt. Dazu erstmal den Code.

<div id='parallax_1'>
    <div class='layer-bg layer' data-depth='0.10' data-type='parallax'></div>
    <div class='layer-1 layer' data-depth='0.20' data-type='parallax'></div>
    <div class='layer-2 layer' data-depth='0.50' data-type='parallax'></div>
    <div class='layer-3 layer' data-depth='0.80' data-type='parallax'></div>
    <div class='layer-overlay layer' data-depth='0.85' data-type='parallax'></div>
    <div class='layer-4 layer' data-depth='1.00' data-type='parallax'></div>
</div>

(function() {
  window.addEventListener('scroll', function(event) {
    var depth, i, layer, layers, len, movement, topDistance, translate3d;
    topDistance = this.pageYOffset;
    layers = document.querySelectorAll("[data-type='parallax']");
    for (i = 0, len = layers.length; i < len; i++) {
      layer = layers[i];
      depth = layer.getAttribute('data-depth');
      movement = -(topDistance * depth);
      translate3d = 'translate3d(0, ' + movement + 'px, 0)';
      layer.style['-webkit-transform'] = translate3d;
      layer.style['-moz-transform'] = translate3d;
      layer.style['-ms-transform'] = translate3d;
      layer.style['-o-transform'] = translate3d;
      layer.style.transform = translate3d;
    }
  });

}).call(this);

Im HTML wird ein Depth Wert verteilt, welchen dann das Script nimmt und umwandelt und sie unterschiedlich schnell bewegen lässt (translate3d).
Diese Werte werden durch die "topDistance = this.pageYOffset;" ausgerechten, also wie weit es zum Seitenanfang ist. Da dieser Wert weiter unten natürlich sehr viel größer ausfällt, verschieben sich die Illustrationen durch die Depth Werte massiv und es funktioniert nicht mehr.

Als ich das noch nicht wusste, kam mir der Gedanke, dass ich neue Klassen und Selektoren schreiben muss, damit das Script jeweils neue Werte bekommt. Da dies nicht funktionierte, habe ich versucht das Script besser zu verstehen und komme nun zu dem Punkt, dass "topDistance = this.pageYOffset;" mit irgendwas ausgetauscht werden muss, damit dieser das Ende des letzten Content Divs benutzt.

Ich finde hier keine Lösung, wobei ich denke für einen der Javascript wirklich kann, dies nur ein klitzekleines Unterfangen ist zu fixen.
Sofern sich jemand findet mir zu helfen, bitte ich dies für ganz blöde zu erklären. Ich versuche mehr Javascript zu lernen, jedoch ist es für mich ein böhmisches Dorf und es geht nur langsam voran.

Vielen Dank schonmal für die Hilfe!

Beste Grüße

 

[andreax]

Ich finde hier keine Lösung, wobei ich denke für einen der Javascript wirklich kann, dies nur ein klitzekleines Unterfangen ist zu fixen.

Wer kann bei diesen Berg an Doppelfunktionen Browser-spezifische Eigenschaften Pseudo-Object-Orientierung ect ect , schon wirklich durchblicken?
Drum solltest du dich doch etwas gedulden bis hier eine Lösung gefunden ist.

Was mir aufgefallen ist ist das parallax_2 parallax_1 einholt. und die layer ja immer kleinere Schritte pro scroll machen bleiben die langsamen zurück
und werden von der 2ten Welle eingeholt.
1.Versuch versteck die Layer im parallax_ div mit overflow hidden.
wenn du weist welcher Layer zurückbleibt kannst du seine Position mit element.offsetTop feststellen. Achtung offsetTop ist nur lesbar.
es gibt auch noch clientTop das ist der Abstand im ParentElement, offsetTop ist der Abstand zum Browserfenster

2. weis ich auch noch nicht

 

[bugles]

Danke schonmal für deine Antwort, ich werde es mal versuchen so zu machen wie du sagst, jedoch wird das bestimmt nichts.
Dafür müsste ich das Script umschreiben und da weiß ich nicht wo und wann

Aber ich werde mal eine minified version von der seite machen, damit wirklich nur der wichtigste Code da ist.
Ansich ist es wirklich nur das Script da oben, welches wichtig ist. Die anderen haben keinen Einfluss auf den Parallax Effekt.