Forums

  • # December 24, 2011 at 2:01 am

    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/

    # December 24, 2011 at 2:35 am

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag