Animation

Guten Morgen

Der "alte" Mann hat wieder mal ein Problemchen ...

Ich hab e ein JS gefunden, mit dem ich eine Bildlauf (wie Film) abspielen kann - das funktioniert, mit php kann ich über ein Formular mit POST den Wert einsetzen. Nun möchte ich die Geschwindigkeit mit einem JS-Regler einstellen können.

Nun ist mein Problem, wie bringe ich den "slider-wert" in das CSS und aktualisiere es? Geht das überhaupt?

Viele Grüsse aus dem Süden, Nebbiolo

/* Die Box, die alle Bilder enthält und animiert wird */
.filmstreifen-schleife {
   display: inline-block;
   white-space: nowrap;
   animation: laufschrift <?php echo $tempo; ?>s linear infinite;// so geht es mit PHP
   ?? animation: laufschrift var(--mein-wert)s linear infinite;// so möchte ich es mit JS machen
}

<div class="slider-container">
<!-- Der Schieberegler -->
<input type="range" id="mein-schieber" min="0" max="100" value="50">
</div>

<!-- Anzeige des aktuellen Werts
<p>Aktueller Wert: <span id="slider-wert">50</span></p>-->
<script>
// Elemente aus dem HTML auswählen
const schieber = document.getElementById('mein-schieber');
const wertAnzeige = document.getElementById('slider-wert');

// Funktion zur Aktualisierung der Anzeige
schieber.addEventListener('input', function() {
wertAnzeige.textContent = this.value;
});
    
// Auf das Wurzel-Element ((:root)) oder ein spezifisches Element anwenden // der Regler oben funktioniert und der Wert wird verändert aber die Geschwindigkeit ändert sich nicht
document.documentElement.style.setProperty('--mein-wert', slider-wert);
</script>

SUPER Vielen Dank!

So geht es nun:

        // Funktion zur Aktualisierung der Anzeige
       schieber.addEventListener('input', function() {
           wertAnzeige.textContent = this.value;
            document.querySelector('.filmstreifen-schleife').style.animation = `laufschrift ${this.value}s linear infinite`;
       });