Javascript-forum
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">
  let timelineYear = 2018
  let paddingRight = 136
  let delayForScriptToRun = 1000// ms

  const ScrollTimelineYearIntoView = (timelineYear, paddingRight) => {
    document.body.style.scrollBehavior = 'smooth;'
    let timelineDiv = document.getElementsByClassName("timelines-years")[0]
    let targetParent = document.getElementById(timelineYear)
    let targetSpan = targetParent.getElementsByTagName("span")[0];
    let getDistance = function (){ return window.innerWidth - $(targetParent).position().left - paddingRight}

    targetSpan.className="rot"
   
    timelineDiv.scrollBy({
      left: getDistance() < 0 ? -getDistance() : 0,
      behavior: 'smooth'
    });
  }

  $(document).ready(function(){
    setTimeout(ScrollTimelineYearIntoView(timelineYear, paddingRight), delayForScriptToRun);
    console.debug(`ScrollTimelineYearIntoView(${timelineYear}, ${padding}), ${delayForScriptToRun})`)
  });
</script>



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!
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.

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!