Code: Select all
var slider = document.getElementById("sliderSpin");
slider.addEventListener("input", (event) => {
root.style.setProperty("--spin", event.target.value + "%");
});
Code: Select all
.SpinChanger {
background: url(300 frame spritesheet, frames stacked horizontally) 0 0 no-repeat;
background-size: 30000%;
animation: GifAnimChanger steps(299) var(--spin) infinite;
aspect-ratio: 1 / 1;
width: 300px;
position: relative;
bottom: 300px;
left: 200px;
}
:root {
--spin: 2s;
}
/* animation that shifts the background over, causing it to resemble a gif */
@keyframes GifAnimChanger {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
Code: Select all
Was ich versuche, ist, ein interaktives Schwarzes Loch zu erschaffen, das sich dreht je nach Position eines Schiebereglers schneller oder langsamer. Ich habe mein GIF in eine @keyframe-Animation mit Hintergrundverschiebung umgewandelt, damit die Geschwindigkeit durch CSS-Eigenschaften geändert werden kann. Das Problem ist, dass ich scheinbar keine Variablen verwenden kann, um die Geschwindigkeit während der Wiedergabe zu ändern, und es stoppt einfach, wenn ich den Schieberegler berühre.
Hier ist mein HTML-Code:
Code: Select all
var slider = document.getElementById("sliderSpin");
slider.addEventListener("input", (event) => {
root.style.setProperty("--spin", event.target.value + "%");
} );
Code: Select all
.SpinChanger {
background: url(300 frame spritesheet, frames stacked horizontally) 0 0 no-repeat;
background-size: 30000%;
animation: GifAnimChanger steps(299) var(--spin) infinite;
aspect-ratio: 1 / 1;
width: 300px;
position: relative;
bottom: 300px;
left: 200px;
}
:root {
--spin: 2s;
}
/* animation that shifts the background over, causing it to resemble a gif */
@keyframes GifAnimChanger {
0% {background-position: 0%;}
100% {background-position: 100%;}
}
Beachten Sie, dass ich keine speziellen Bibliotheken oder ähnliches verwende und dass dies alles in Visual Studio Code erfolgt.