Animated preview - how do I do this? Update: Variables in CSS?

[hopelesssituationwar]

I have an app that I have been working on for months now, gradually adding functionality as I learn how to do new things. I’m successfully getting JSON data back from requests just fine, but I have a question about what to do with some of the data.

I have a feeling that this object here:

"animated_preview_url": "https://vod-storyboards.twitch.tv/2db359bbba35e8efb6cc_chronobodi_27123814288_763908563/storyboards/213968227-strip-0.jpg",

is the source file of what you see when you hover over the video thumbnail in the “Videos” tab of a channel, is that correct? When I hover, the thumbnail changes from a still image to what looks like an animated gif-type looping image. How is this accomplished? I don’t necessarily want code written for me, just point me in the general direction, because I don’t even know what search terms to use to google it!

When I look at the object, opening it up in the browser, I can see it is a single image, very long and narrow. It looks like a film strip.

I apologize for being so vague, and not having any code to show you. I’m just at a total loss because I don’t even know what this is.

Thanks in advance for any help, even a keyword!

[modesttim]

This is the same concept as “Image Sprites”. It’s use is to help performance; So instead of requesting 10 images you only have to request 1 image that has 10 images inside it.

I know you said you didn’t code written but figured it say may help get the idea across.
https://jsfiddle.net/TimCole/jm6Lvwr7/1/

[BarryCarlyon]

is the source file of what you see when you hover over the video thumbnail in the “Videos” tab of a channel, is that correct? When I hover, the thumbnail changes from a still image to what looks like an animated gif-type looping image. How is this accomplished? I don’t necessarily want code written for me, just point me in the general direction, because I don’t even know what search terms to use to google it!

Create a div, where the div has the animated_preview_url as it’s background image.

Either

On mouse over, run a CSS animation that moves (background-position) the background image

or

On mouse over, run some Javascript to move the background image

[hopelesssituationwar]

Ah ok! Yes this is it! Thank you so much!

[hopelesssituationwar]

Well, the solutions and suggestions provided earlier will work, if I hard-code the url from the JSON response into the CSS.

I have tried using the same variable that I’m using everywhere else in my HTML and assigning it to an attribute in several different ways. On MDN I found this:

<p data-foo="hello">world</p>

p::before {
  content: attr(data-foo) " ";
}

which seems like it should work with assigning variables where they have “hello”, but it’s not working. The variable was returning an image strip (just putting image tags around it) but now I can’t get it to return anything, is it just me?

<ul url="' + videos[0].videos[0].animated_preview_url + '">

ul:hover {
  content: attr(url) no-repeat;
  animation-name: animate;
	animation-duration: 5s;
	animation-timing-function: steps(9); 
	animation-iteration-count: infinite;
}

Any other ideas?