CSS Raindrops on a Window

by randomdrake • 13 years ago

111 25 13 years ago

adamwong2462• 13 years ago

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

lbebber5• 13 years ago

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

adamwong2462• 13 years ago

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.

BHSPitMonkey2• 13 years ago

Are you so sure?

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

lloeki• 13 years ago

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/

elwell• 13 years ago

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

lbebber5• 13 years ago

Hahahhah this is great

chriscoyier• 13 years ago

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

cjfont• 13 years ago

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

drakaal• 13 years ago

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.

nairteashop• 13 years ago

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

rwl4• 13 years ago

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

rkv• 13 years ago

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

zghst• 13 years ago

CSS filters work in IE11??

trentmb• 13 years ago

Why does codepen require cookies to work?

Angostura2• 13 years ago

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?

shrikant• 13 years ago

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

lbebber5• 13 years ago

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.

Angostura2• 13 years ago

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.

codygman• 13 years ago

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

zero-error• 13 years ago

Works fine for me.

FF 25.0.1 on Ubuntu 13.10

CSS Raindrops on a Window

Related Stories