Treehouse: Grow your CSS skills. Land your dream job.

Unknown effect

  • # June 9, 2013 at 10:39 am

    Hi, guys.

    Found this site and was amazed by effect when you hover on logo in the center . How it was made, just for interesting?

    # June 9, 2013 at 2:40 pm

    It’s a link with a whole shipload of spans in it all with transitions / transforms on them.I would guess there’s some JS in there too.

    # June 9, 2013 at 4:13 pm

    Do you have idea why they put it in ?

    # June 9, 2013 at 4:27 pm

    To get that effect, they obviously think it’s worth it.

    # June 9, 2013 at 4:46 pm

    > I would guess there’s some JS in there too.

    Obviously, if you look at the source you see the markup before JS… just ``

    # June 9, 2013 at 4:49 pm

    sorry, want to say why they put span in a link, instead of another tag?

    # June 9, 2013 at 4:54 pm

    This is the part of their JavaScript that handles the logo, I made it a little bit more readable

    j = jQuery(“#logo”).css(“backgroundImage”, “none”).html(“”);
    for (x = 0; 18 > x; x++) {
    var w;
    for (y = 0; 18 > y; y++)
    w = jQuery(““).attr(“style”,”width:”+n+”px;height:”+b+”px;background-position:-“+b*y+”px -“+n*x+”px;-“+h+”-transition-property: -“+h+”-transform; -“+h+”-transition-duration: 200ms; -“+h+”-transition-timing-function: ease-out; -“+h+”-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);”),


    The other properties (like background img) are set using CSS, use the inspector. Seems like a pretty easy to make effect right :)

    # June 10, 2013 at 3:51 am

    The effect could be called particle animation, and it can be done also with HTML5 Canvas. Here is a slightly different example:

    # June 10, 2013 at 9:57 am

    @CrocoDillon Wow, it’s really this small script + jQuery can handle this effect?
    @jozsef canvas is our future and very sad that, maybe, a lot of people never learn how to use it ((((

    # June 10, 2013 at 4:32 pm

    > jQuery can handle this effect?

    jQuery is used to create the spans, you can do it without jQuery as well rather easily, using plain JavaScript (`getElementById` and `innerHTML` are cross-browser, pretty much all you need). The effect is handled by transform transitions.

    Agree on canvas, but that’s because it uses JavaScript and most people never learned how to use that either.

    # June 10, 2013 at 5:22 pm

    How do you think there will be some libraries for canvas that will help to handle it?

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

You must be logged in to reply to this topic.