Grow your CSS skills. Land your dream job.

How Chris Do This

  • # 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.

    # December 24, 2011 at 2:36 am

    How can css transition triggered by the size of the screen? -..-

    # December 24, 2011 at 12:10 pm

    media queries

    # December 26, 2011 at 8:30 pm

    You’re right @silver37, I’m just need CSS Transition and media queries (@wolfcry911) HAHA.. :D

    http://fiddle.jshell.net/tovic/BTHq4/3/show/

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".