Hover.css – A collection of CSS3-powered hover effects | Hacker News Reader

Hover.css – A collection of CSS3-powered hover effects

ianlunn.github.io

67 pointsianlunn14 comments

Is this just animate.css (https://daneden.me/animate/) rebranded?

Yep thought so. Even though some effects are quite different

Unfortunately, hover effects are becoming less important to me because of how awkward they are on touch devices.

Worst case, you can disable CSS animations on mobile devices via media queries.

I would like to see touch devices start using eyetracking via the camera to infer what you are looking at and enable "ongaze" effects, which would have to be much more subtle versions of onhover. Furthermore, if ongaze, offgaze effects existed, it would be important to allow the user to disable them systemwide (i.e. short-circuit ongaze so it is never trigger).

Using a color besides grey on white would be nice. The lack of contrast makes some of the effects really difficult to see, especially the Speech Bubble ones.

My work monitors are crappy, rendering speech bubbles invisible. I'll look forward to checking this out on my own machine though. Checked out your personal site from here, nice work on Sequence.js! (http://ianlunn.co.uk/articles/sequence-js-launch/)

Thanks. Will up the contrast on the buttons this evening.

Those are really nicely done effects, and I could see finding a use for some of the effects -- but not triggered on hover, I've pretty much given up on anything triggered on hover, because of need to support touch.

There's still a lot of desktop systems out there. And anything you trigger on hover can be triggered on other pseudo selectors (active, selected).

I've found hover effects to be really useful on a client-side basis -- I do a lot of restyling of websites to improve readability and usability. One modification I've made is an asymmetrically timed resizing of edit dialogs in the case of Diaspora. One second after entry, the dialog expands in size and gets a subtle border. The border will fade after 20s, indicating that the dialog will shrink shortly, the dialog itself after 30s.

This gives a responsive but not jittery design with a bit of hysteresis and signaling.

Others are the emphasis given to tabs and other controls on this subreddit: http://www.reddit.com/r/dredmorbius (hover over the post and comment controls), or submit button.

Excessive animation can be annoying, but with the right touch, it's a nice usability enhancement.

I like the dialog expanding thing -- but that's not on hover over the text box, it's on click/touch/select/entry into the text box, right? Or you really mean hover? It seems to me it'd be annoying on hover, but maybe I'd have to see it.

On hover, with a 1s delay to expand. In practice that means the window usually expands as you start writing into it. And it's hard to trigger by accident.

I haven't tried on active yet, but suspect that that would not persist after I released the mouse button. With hover. so long as the mouse stays over the textarea and surrounding frame, it remains expanded.

I've posted code:

http://www.reddit.com/r/dredmorbius/comments/1spr7a/asymmetr...

(see the last code sample there).

The page curl doesn't look good enough to me, at least with those colors.

These are handy! Thanks for sharing!

Reply on news.ycombinator.com