How Chris Do This

[Taufik Nurrohman]

Is there anybody knows how Chris do this:
The frog at the upper right corner, when the window is reduced and enlarged, the frog will change with the fading effect. I can do that with CSS Animation, but it applies only when the window is reduced, and when the window is enlarged, a fading effect doesn’t appear.
I wonder how he could create that effect for the two window conditions (reduce & enlarge).

There are 3 frogs on top with fading effect. Do I must create three names of the CSS animation with same effect only to create that effect for 3 frogs? Because, single name animation can’t be applied although with different media queries.
Is it can be done only with CSS?

Here’s the example: http://fiddle.jshell.net/tovic/BTHq4/show/
And here’s the code: http://jsfiddle.net/tovic/BTHq4/

[sliver37]

It’s three different images combined into a sprite.

Use media queries for different page widths, and change the background position of the sprite to show a different portion of the frog.

Apply a small CSS transition with opacity to get the fading effect and you’re all set.

I’m sure others will go deeper into the details if you need that.

[Author]

Posts