4 ms·

Click around, hover over a link

43 points by ericz 14y ago

kondro 14y ago
That's hideous.
- petitmiam 14y ago
  I thought that too when I hovered, but clicking is much more fun. You can get a nice swing happening. The examples at http://desandro.github.com/3dtransforms/ http://desandro.github.com/3dtransforms/ are great.
lukevdp 14y ago
Reminds me of the bright colours of geocities days
pooriaazimi 14y ago
Nice hack (especially when you're clicking around), but what caught my eye was that maybe for the first time, Safari is actually waaay faster than Chrome or Firefox. This is (roughly) the framerate I got when I tried it on the these three browsers (all latest versions, Windows Vista): Safari: 60 fps (or 30, or whatever "completely smooth" means) Chrome: 20 fps (compared to Safari) Firefox: 30 fps (compared to Safari) But why? Chrome has always been the fastest (on Windows - on Mac, Safari is somewhat smoother for me)???
- xemoka 14y ago
  Do you have chrome://flags -> "GPU compositing on all pages" set to enabled?
  - pooriaazimi 14y ago
    No, it was "Default". I enabled it and... much to my surprise, the frame rate dropped significantly. It's now like 3 (three) frames per second (it's so slow I am able to actually count the frames!) The "hover" animation (rainbow thing) is fine, 100% smooth. But the exploding animation is just ridiculously slow. Then I set it to be disabled and the frame rate improved a little. Default: 20 fps GPU composition DISABLED: 10 fps GPU composition ENABLED: 3 fps The machine I'm testing with is not particularly powerful, maybe that's the problem. 2 or 3 GBs of RAM, nVidia 9400 (or something like that).
    - ygra 14y ago
      A bit sad if that's “not particularly powerful” for animating a few letters on a freaking web page ... :-)
- amccloud 14y ago
  From what I can tell, requestAnimationFrame in Chrome runs at a slower frame rate. I've had a similar experience with a plugin i'm writing. Maybe I was doing something wrong but requestAnimationFrame was firing once for every ~10 actual frames in Chrome.
retlehs 14y ago
This is awesome, too: http://metafizzy.co/ http://metafizzy.co/ (also from David DeSandro) Hover over the logo and watch how the colors on the page change
BryanB55 14y ago
Oh I see... FYI: Click on the background somewhere near text. I was clicking on links and you dont get the 'smush' effect unless you click on the background....and hovering over links gives a rainbow colored effect. I guess its cool.... but no, not really.
DigitalSea 14y ago
This simple effect reminds me of the hey day of horrible animated GIF files, entertaining nonetheless and pretty awesome that this kind of effect can be done without using images. Aside: David DeSandro is awesome. His jQuery Masonry plugin has saved me so many times when I've been tasked to build a horizontal site.
- TazeTSchnitzel 14y ago
  You'll love this horrible abuse of CSS3 and HTML5 I dreamed up with my friend, then: http://orangestar.cats4gold.net/drogz/ http://orangestar.cats4gold.net/drogz/ Why yes, that is an instrumental MIDI converted to MP3 and OGG.
tambourine_man 14y ago
click/click and drag on anything but the links.
wyattdanger 14y ago
Go to the very bottom and click "What's the email?". That effect is awesome!
kylebrown 14y ago
hover? seriously? Didn't mouseovers become a big design no-no, now that tablets are in and PCs are out? I hope I remember to check this later when I'm on my laptop. ps. I love desandro's isotope library
- sgdesign 14y ago
  The "big no-no" is having important information that is only displayed on hover, not hover effects in themselves.
austenallred 14y ago
A great piece of engineering, but I have to say... just because you can do something, doesn't mean you should. I hate too much negativity, though, so I'll repeat my, "Well done."
kunil 14y ago
Kinda reminds me of my old flash text effects. http://0.s3.envato.com/files/42885/preview.swf http://0.s3.envato.com/files/42885/preview.swf (second and forth one)

43 points by ericz 14y ago

kondro 14y ago

That's hideous.

petitmiam 14y ago
I thought that too when I hovered, but clicking is much more fun. You can get a nice swing happening. The examples at http://desandro.github.com/3dtransforms/ http://desandro.github.com/3dtransforms/ are great.

lukevdp 14y ago

Reminds me of the bright colours of geocities days

pooriaazimi 14y ago

Nice hack (especially when you're clicking around), but what caught my eye was that maybe for the first time, Safari is actually waaay faster than Chrome or Firefox. This is (roughly) the framerate I got when I tried it on the these three browsers (all latest versions, Windows Vista): Safari: 60 fps (or 30, or whatever "completely smooth" means) Chrome: 20 fps (compared to Safari) Firefox: 30 fps (compared to Safari) But why? Chrome has always been the fastest (on Windows - on Mac, Safari is somewhat smoother for me)???

xemoka 14y ago
Do you have chrome://flags -> "GPU compositing on all pages" set to enabled?
- pooriaazimi 14y ago
  No, it was "Default". I enabled it and... much to my surprise, the frame rate dropped significantly. It's now like 3 (three) frames per second (it's so slow I am able to actually count the frames!) The "hover" animation (rainbow thing) is fine, 100% smooth. But the exploding animation is just ridiculously slow. Then I set it to be disabled and the frame rate improved a little. Default: 20 fps GPU composition DISABLED: 10 fps GPU composition ENABLED: 3 fps The machine I'm testing with is not particularly powerful, maybe that's the problem. 2 or 3 GBs of RAM, nVidia 9400 (or something like that).
  - ygra 14y ago
    A bit sad if that's “not particularly powerful” for animating a few letters on a freaking web page ... :-)
amccloud 14y ago
From what I can tell, requestAnimationFrame in Chrome runs at a slower frame rate. I've had a similar experience with a plugin i'm writing. Maybe I was doing something wrong but requestAnimationFrame was firing once for every ~10 actual frames in Chrome.

retlehs 14y ago

This is awesome, too: http://metafizzy.co/ http://metafizzy.co/ (also from David DeSandro) Hover over the logo and watch how the colors on the page change

BryanB55 14y ago

Oh I see... FYI: Click on the background somewhere near text. I was clicking on links and you dont get the 'smush' effect unless you click on the background....and hovering over links gives a rainbow colored effect. I guess its cool.... but no, not really.

DigitalSea 14y ago

This simple effect reminds me of the hey day of horrible animated GIF files, entertaining nonetheless and pretty awesome that this kind of effect can be done without using images. Aside: David DeSandro is awesome. His jQuery Masonry plugin has saved me so many times when I've been tasked to build a horizontal site.

TazeTSchnitzel 14y ago
You'll love this horrible abuse of CSS3 and HTML5 I dreamed up with my friend, then: http://orangestar.cats4gold.net/drogz/ http://orangestar.cats4gold.net/drogz/ Why yes, that is an instrumental MIDI converted to MP3 and OGG.

tambourine_man 14y ago

click/click and drag on anything but the links.

wyattdanger 14y ago

Go to the very bottom and click "What's the email?". That effect is awesome!

kylebrown 14y ago

hover? seriously? Didn't mouseovers become a big design no-no, now that tablets are in and PCs are out? I hope I remember to check this later when I'm on my laptop. ps. I love desandro's isotope library

sgdesign 14y ago
The "big no-no" is having important information that is only displayed on hover, not hover effects in themselves.

austenallred 14y ago

A great piece of engineering, but I have to say... just because you can do something, doesn't mean you should. I hate too much negativity, though, so I'll repeat my, "Well done."

kunil 14y ago

Kinda reminds me of my old flash text effects. http://0.s3.envato.com/files/42885/preview.swf http://0.s3.envato.com/files/42885/preview.swf (second and forth one)