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?
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/
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.
http://fiddle.jshell.net/tovic/BTHq4/3/show/