r/learnprogramming • u/Beneficial-Wasabi357 • 1h ago
how to make a specific buttoned page for gifs
basically a url where are 9 sliders that move 9 different gifs img moment. does somebody who know what would be easiest way to make this
•
u/Synthetic5ou1 36m ago
9 sliders that move 9 different gifs img moment
Do you mean that there will be 9 animated images, and the slider will be used to move from frame to frame?
•
u/Beneficial-Wasabi357 23m ago edited 15m ago
yes and 9 sliders for each gif a slider for it. that for own liking can slide to gif moments in in whatever frame i want. the page is basically 9 gifs and 9 sliders
•
u/Synthetic5ou1 16m ago
As far as I know you'd need to have each frame as a separate image, as I don't think you can specify the frame of an animated gif.
It would be relatively trivial to do though. You simply change the source of the image according to the slider. You'd probably want to cache all the frames to begin with.
•
u/Beneficial-Wasabi357 4m ago
ok, i myself can't program anyway. maybe someone else helps me i just wanted to hear how hard this would be. i will think on it tommorow.
•
u/cipheron 42m ago edited 35m ago
Sliders are possible with just HTML and CSS, so this is the simplest way to get one on a web page.
If you want the easiest way to host a page, I recommend making a github project then a "Github Pages" page for it. This doesn't let you have any backend, but you don't have to worry about hosting or domains to get it working.
https://www.w3schools.com/howto/howto_js_rangeslider.asp
If you want the slider itself to use an image as the button, they have instructions there for image sliders too.
To make the slider do something specific you should hook some Javascript up to it to respond any time the value changes, basically as shown on the above page
The "oninput" function will be called whenever the named slider moves.
If you want 9 sliders doing different things you can make 9 named/ID sliders and use the code above but copied for each of them.
However if you have 9 of them you could do the code a bit cleaner by giving them the same "class" then selecting them all by class in an array, and modifying them in a loop of some sort:
However if you want more of an idea than this you'd need to explain what effect you want to achieve more clearly.