CSS Raindrops on a Window | Hacker News Reader

CSS Raindrops on a Window

codepen.io

111 pointsrandomdrake25 comments

Open articleView on HN

Works with animated gif of carlton: http://codepen.io/anon/pen/Atpgn

It's amazing you can see the reflection through the raindrops change as well.

Hahahhah this is great

I love these demos. A JS version of this was posted on HN a while back: http://maroslaw.github.io/rainyday.js

This one is by far my favorite. But the one just posted is very cool too. :)

This one is amazing: http://maroslaw.github.io/rainyday.js/demo012_4.html. Thanks for the link.

Bonus points if you can you make the drops dribble downwards like so: http://www.netanimations.net/water-rainy-day_window_animated...

If I can get to work on this again I will do that. I'm gonna have to use JS however.

Cool. Sounds really hard though. To look realistic, the drops would have to merge into one another and also follow down previously established paths. It's pretty cool that you did this in just css but I think we have veered into WebGl territory.

Yeah probably. Though still can be done with good enough results without WebGL I believe.

Are you so sure?

http://codepen.io/i0z/pen/mFLCw

Well that is impressive. However I don't know if there's a way to check for collisions that don't include the mouse pointer in CSS. (and I would like that if one drop falls over another they both merge)

(Note: I am not the author of this link; See its original HN discussion[1] for details.)

[1] https://news.ycombinator.com/item?id=6780008

Just figured out that you can make your ship temporarily disappear by right clicking =)

Just for the sake of it, I swear that one[0] had a better video of the effect in the background, but they changed it.

[0]: http://www.rainymood.com/

A simple improvement would be to make overlapping drops unite into one big oval, but it's otherwise very realistic.

Very Cool. A couple of neat additions I can think of to make more realistic.

If two drops touch they become a large drop.

Drops over a certain size run down the window and consume any drops they touch.

Drops "dry" through decay at a set rate.

Enthusiastic noob here. I can usually fathom what is going in these neat CSS demos, but this one baffles me. Could someone provide a few pointers as to how it's doing what it does?

Hey, I made this thing.

Each rain drop takes an image, scales it down, rotates it 180º, positions it according to the drop's position and crops in a round shape. Then a small border is added according to the drop's size. The trick is getting all those values right.

Many thanks for answering. Much appreciated. Conceptually, I understand each of those steps. I'm much less clear on how the drop appears to refract the underlying image.

Appears to be using cubic bezier CSS3 Transitions. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using...

For some reason codepen tells me I don't have javascript enabled even though I do. Perhaps it doesn't like firefox on ubuntu?

Works fine for me.

FF 25.0.1 on Ubuntu 13.10

Why does codepen require cookies to work?

CSS filters work in IE11??

Reply on news.ycombinator.com