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