- This topic is empty.
-
AuthorPosts
-
June 9, 2013 at 10:39 am #45404KuzyoParticipant
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?
ThanksJune 9, 2013 at 2:40 pm #135521Paulie_DMemberIt’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 #138145KuzyoParticipantJune 9, 2013 at 4:27 pm #138146Paulie_DMemberTo get that effect, they obviously think it’s worth it.
June 9, 2013 at 4:46 pm #138150CrocoDillonParticipant> I would guess there’s some JS in there too.
Obviously, if you look at the source you see the markup before JS… just `Alcyon Communication`
June 9, 2013 at 4:49 pm #138151KuzyoParticipantsorry, want to say why they put span in a link, instead of another tag?
June 9, 2013 at 4:54 pm #138152CrocoDillonParticipantThis 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 :)
June 10, 2013 at 3:51 am #138179Jozsef K.ParticipantThe 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 #138205KuzyoParticipant@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 #138233CrocoDillonParticipant> 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 #138240KuzyoParticipantHow do you think there will be some libraries for canvas that will help to handle it?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.