Look: this is very impressive. And not to be a dick about it but – I have to point out that the original “flying toasters“ did not overlap; they were all on the same isometric-looking z-index, as it were. Instead of overlapping, a faster-moving toaster would slide straight down slowly behind a slow-moving toaster or toast ahead of it. Really I am sorry for even pointing this out but half the reason I clicked this link was to see how this specific object-detection aspect of “flying toasters“ might be done in CSS.
I don't think that this could be recreated in CSS only, you need to do at least some calculations and conditional execution for this. This is probably the max you can get with CSS only. Congrats.
My dad used to love that screen saver. And then I worked in the building that was formerly occupied by Berkeley Systems (the company behind the flying toasters...)
Interesting that neither this, nor the CSS version, have the tricky bits of juggling toast, or bread going in and toast coming out. That was what I liked about the screen saver, the toasters were toasting while they flew, which only added to the ultimate absurdity of it all.
>The toasters fly from the top-right to the bottom left, and we could choose to animate this by changing the value of z-index or of a newer function called translate().
How would animating the z-index cause the sprite to move from the top right to the bottom left? Z-index controls what draws in front of what, not spatial position.
We realized it's more sensible to sent display devices to standby when the user is afk. And we got screens that didn't need saving (from burn in), though I figure that was true of almost all monitors connected to computers running After Dark >3, anyway. And I guess the novelty effect wore off, too.
31 comments
[ 3.4 ms ] story [ 121 ms ] threadSeems like the toasters don't overlap each other, but they do overlap the toast (eg, at 0:08).
Anyway, very cool CSS creation.
I don't think that this could be recreated in CSS only, you need to do at least some calculations and conditional execution for this. This is probably the max you can get with CSS only. Congrats.
How would animating the z-index cause the sprite to move from the top right to the bottom left? Z-index controls what draws in front of what, not spatial position.
One thing that could be done with this is to make an Android 'daydream' screensaver. That would be 'useful'!