The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How Chris Do This

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #35817
    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:
    And here’s the code:


    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)
  • The forum ‘CSS’ is closed to new topics and replies.