Div's beim Scrollen horizontal verschieben
Hallo,
ich möchte gerne zwei Div's (rot und grün) beim Scrollen nach links bzw. rechts verschieben, damit ein drittes Div (gelb) dazwischen durchlaufen kann. Ich habe schon etwas herumexperimentiert, allerdings passt das Ergebnis noch nicht ganz. Demo Problem Die Verschiebungen der beiden Div's (rot und grün) scheinen nicht immer gleich zu sein. Je nachdem wie ich den Scrollbalken bewege funktioniert es einmal, ein anderes Mal überschneiden sich die Div's. Hat jemand einen Tipp oder sieht einen Fehler meinerseits. |
So?
Edit fiddle - JSFiddle Wie sollen die Div´s bei dir denn immer gleich verschoben werden, wenn du mit die Variable s dynamisch berechnen lässt. Die ändert sich ja immer je nachdem wie weit du runtergescrollt hast. z.B.: 10px nach unten gescrollt --> verschiebung 5.2 * 10 = 52px 20px nach unten gescrollt --> verschiebung 5.2 * 20 = 104px Wenn ich das richtig interpretiert habe... |
Ich sehe das Problem eher darin, dass du immer um einen festen Wert verschiebst. Aber je nach Breite des Anzeigefensters ist die linke/rechte Ecke der mittleren Box wo anders.
Statt dieser ganzen jQuery-Methoden würde ich mal auf ein Paar native Befehle zurückgreifen. Mit offsetLeft und offsetWidth bekommst du die Pixelpositionen der Boxen. So kannst du mit jedem window.onresize die Position berechnen, die die Boxen haben müssen, wenn sie neben der mittleren Box sind. Für die eigentliche Animation würde ich dann mit einem [0, 1]-Wert arbeiten. Also: Code:
linkeBox.style.left = - linkeBox.style.offsetWidth + mittlereBox.style.offsetLeft * s + urspruenlichePositionVonLinkerBox * (1-s) + 'px'; Hier liegt s jetzt zwischen 0 und 1. Bei 0 ist die Box an ihrer alten Stelle, bei 1 neben der mittleren Box und für Werte dazwischen eben dazwischen. Die Fragliche Zeile musst du jetzt eben im onresize und im onscroll aufrufen. Das s muss im onscroll berechnen werden. Achja: Wenn die Boxen unterschiedliche offsetParents haben, kann die Berechnung mit offsetLeft falsch werden. Dann musst du noch mehr Code für die Positionsberechnung schreiben :D |
Alle Zeitangaben in WEZ +2. Es ist jetzt 04:02 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023