How I rebuilt "Flying Toasters" using only CSS animations(bryanbraun.com)
bryanbraun.com
How I rebuilt "Flying Toasters" using only CSS animations
http://bryanbraun.com/2014/03/15/how-i-rebuilt-flying-toasters-using-only-css-animations
31 comments
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 wasn't quite following, so I sought out a video: http://www.youtube.com/watch?v=0Cm7tv5cM8g
Seems like the toasters don't overlap each other, but they do overlap the toast (eg, at 0:08).
Anyway, very cool CSS creation.
Seems like the toasters don't overlap each other, but they do overlap the toast (eg, at 0:08).
Anyway, very cool CSS creation.
fish2000 probably remembers an earlier version http://www.youtube.com/watch?v=5gD-JnD1DCo
That is it totally – I first ran After Dark on my family’s Mac LC II, maybe about 23 years ago.
Also the untoasted bread would jump into the toasters and come back out toasted.
I didn't recall the toast overlap! That is quite a bit cooler than my personal “flying toasters“ memory. Thanks for posting that clip.
I like the one that is juggling with the toast.
You mean like: http://www.masswerk.at/flyer/ ?
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.
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.
I loved this screensaver. A couple of years ago it was rebuilt in WebGL too: http://apps.playcanvas.com/will/arthacksf/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 version I remember (from the Mac Classic) didn't do any of that http://www.youtube.com/watch?v=SWV-que3tRU#t=99
I would be really impressed if people queued up in droves to pay hard currency for this, like they did back in the day! Incredible to think of it now.
One thing that could be done with this is to make an Android 'daydream' screensaver. That would be 'useful'!
One thing that could be done with this is to make an Android 'daydream' screensaver. That would be 'useful'!
>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.
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.
The inevitable link everyone will look for next: https://github.com/tlrobinson/WebSaver
is there a way to do this for desktop image?
And now we come full circle to IE's ActiveDesktop?
This brings back memories. Whatever happened to screensavers? It seems like nobody uses them anymore. My favorite was always johnny castaway though.
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.
I welcome CSS recreation posts always, but I especially like the "how I did it" break down. Thanks.
That's awesome. I had the After Dark pack on my very first computers, a Powerbook 100 and a IIsi.
Huh, on Android Browser, the toast flies but the the toasters just animate in place.
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...)
Now do Daredevil Dan
Ha ha. Some of my favorites (like Marbles or Confetti Factory from After Dark 2.0) would be pretty tricky with only CSS.
man, brings back memories from the os9 days
Love it
Love it!
Fucking rad.