
CSS Raindrops on a Window - randomdrake
http://codepen.io/lbebber/pen/uIiJp
======
elwell
Works with animated gif of carlton:
[http://codepen.io/anon/pen/Atpgn](http://codepen.io/anon/pen/Atpgn)

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

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

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

------
adamwong246
Bonus points if you can you make the drops dribble downwards like so:
[http://www.netanimations.net/water-rainy-
day_window_animated...](http://www.netanimations.net/water-rainy-
day_window_animated_free_gif.gif)

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

~~~
BHSPitMonkey
Are you so sure?

[http://codepen.io/i0z/pen/mFLCw](http://codepen.io/i0z/pen/mFLCw)

~~~
lbebber
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)

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

------
drakaal
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.

------
Angostura
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?

~~~
lbebber
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.

~~~
Angostura
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
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
Works fine for me.

FF 25.0.1 on Ubuntu 13.10

------
trentmb
Why does codepen require cookies to work?

------
zghst
CSS filters work in IE11??

