04.03.2023, 08:27
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.
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>
