Forums

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

Home Forums CSS Unknown effect

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #45404
    Kuzyo
    Participant

    Hi, guys.

    Found this site http://alcyon-communication.com/ and was amazed by effect when you hover on logo in the center . How it was made, just for interesting?
    Thanks

    #135521
    Paulie_D
    Member

    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.

    #138145
    Kuzyo
    Participant

    Do you have idea why they put it in ?

    #138146
    Paulie_D
    Member

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

    #138150
    CrocoDillon
    Participant

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

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

    #138151
    Kuzyo
    Participant

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

    #138152
    CrocoDillon
    Participant

    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);”),
    j.append(w);
    w.append(jQuery(“

    “).addClass(“clear”))
    }

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

    #138179
    Jozsef K.
    Participant

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

    http://www.feedtank.com/labs/html_canvas/

    #138205
    Kuzyo
    Participant

    @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 ((((

    #138233
    CrocoDillon
    Participant

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

    #138240
    Kuzyo
    Participant

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