8 ms·
CSS Raindrops on a Window
- adamwong246 13y agoBonus points if you can you make the drops dribble downwards like so: http://www.netanimations.net/water-rainy-day_window_animated_free_gif.gif http://www.netanimations.net/water-rainy-day_window_animated...
- lbebber 13y agoIf I can get to work on this again I will do that. I'm gonna have to use JS however.
- adamwong246 13y agoCool. 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.
- lbebber 13y agoYeah probably. Though still can be done with good enough results without WebGL I believe.
- BHSPitMonkey 13y agoAre you so sure? http://codepen.io/i0z/pen/mFLCw http://codepen.io/i0z/pen/mFLCw
- lbebber 13y agoWell 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)
- mlader 13y agoJust figured out that you can make your ship temporarily disappear by right clicking =)
- BHSPitMonkey 13y ago(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 https://news.ycombinator.com/item?id=6780008
- lloeki 13y agoJust 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/ http://www.rainymood.com/
- elwell 13y agoWorks with animated gif of carlton: http://codepen.io/anon/pen/Atpgn http://codepen.io/anon/pen/Atpgn
- lbebber 13y agoHahahhah this is great
- chriscoyier 13y agoIt's amazing you can see the reflection through the raindrops change as well.
- cjfont 13y agoA simple improvement would be to make overlapping drops unite into one big oval, but it's otherwise very realistic.
- drakaal 13y agoVery 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 13y agoI 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
- zghst 13y agoCSS filters work in IE11??
- trentmb 13y agoWhy does codepen require cookies to work?
- Angostura 13y agoEnthusiastic 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 13y agoAppears to be using cubic bezier CSS3 Transitions. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using...
- lbebber 13y agoHey, 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 13y agoMany 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 13y agoFor 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 13y agoWorks fine for me. FF 25.0.1 on Ubuntu 13.10