animierte Zeitleiste - Druckversion +- Javascript-forum (https://javascript-forum.de) +-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4) +--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6) +--- Thema: animierte Zeitleiste (/showthread.php?tid=2201) |
animierte Zeitleiste - Eifelkrimi - 04.03.2023 Guten Morgen, die Plattform »eifelkrimi.de« präsentiert nicht nur Bücher und Autoren, sondern auch Filme und TV-Serien, die seit den dreißiger Jahren in der Region gedreht worden sind. Als besonderer »Eyecatcher« wird eine horizontale Zeitleiste am oberen Seitenrand auf das Jahr der Veröffentlichung bewegt - allerdings bisher noch viel zu schnell. Beispiel: https://www.wackerberg.de/tatort/maik.php Die Anweisung --- document.body.style.scrollBehavior = 'smooth; --- reicht für den gewünschten Effekt offensichtlich nicht aus. Statt dessen würde ich gerne einen Parameter mit der gewünschten Zeitdauer der Bewegung einführen (z.B. 4.000 Millisekunden) und zusätzlich eine Art »ease-in-out« nutzen. In den bestehenden Code (s.u.) soll diese Funktionalität mit ein paar Zeilen JavaScript/JQuery integriert werden. Dazu fehlen mir als absoluter Anfänger und »Nicht-Programmierer« jedoch die Fähigkeiten. Code: <script type="text/javascript"> RE: animierte Zeitleiste - ollelinse - 04.03.2023 Hallo Eifelkrimi, ich kann mich irren ... aber ich fürchte mit deiner Methode kannst du nur marginal auf die Scrollgeschwindigkeit einwirken, und hauptsächlich nur eine Startverzögerung erreichen. Sieh dir mal "marquee scrolldelay" an, vielleicht passt das in dein Konzept... https://tutorial.techaltum.com/marquee.html RE: animierte Zeitleiste - Eifelkrimi - 05.03.2023 Vielen Dank für den Hinweis! Mit "marquee" kann zwar in unterschiedliche Richtungen und Geschwindigkeiten gescrollt werden, aber das Anfahren einer bestimmen ID ist wohl nicht vorgesehen. Außerdem gilt der Befehl für HTML5 als "absolet". Die Lösung für mein Problem wird also wohl doch aus dem Bereich "JavaScript/JQuery" kommen. RE: animierte Zeitleiste - rzscout - 05.03.2023 (05.03.2023, 07:19)Eifelkrimi schrieb: Vielen Dank für den Hinweis! Hi Eifelkrimi, viele Wege führen nach Rom. Du kannst Scrolleffekte mithilfe von CSS und/oder JavaScript erstellen. Wenn ich Zeit finde suche ich dir eine Lösung heraus oder bastel dir ein Beispiel RE: animierte Zeitleiste - Eifelkrimi - 06.03.2023 Prima - ich bin gespannt! |