6 ms·
How I rebuilt "Flying Toasters" using only CSS animations
- fish2000 13y agoLook: 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.
- mikepurvis 13y agoI wasn't quite following, so I sought out a video: http://www.youtube.com/watch?v=0Cm7tv5cM8g 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.
- enneff 13y agoAlso the untoasted bread would jump into the toasters and come back out toasted.
- thomasahle 13y agoI like the one that is juggling with the toast.
- fish2000 13y agoI didn't recall the toast overlap! That is quite a bit cooler than my personal “flying toasters“ memory. Thanks for posting that clip.
- kalleboo 13y agofish2000 probably remembers an earlier version http://www.youtube.com/watch?v=5gD-JnD1DCo http://www.youtube.com/watch?v=5gD-JnD1DCo
- fish2000 13y agoThat is it totally – I first ran After Dark on my family’s Mac LC II, maybe about 23 years ago.
- masswerk 13y agoYou mean like: http://www.masswerk.at/flyer/ 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.
- quahaug 13y agoFucking rad.
- epynonymous 13y agoman, brings back memories from the os9 days
- judk 13y agoHuh, on Android Browser, the toast flies but the the toasters just animate in place.
- nroose 13y agoMy 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...)
- haymills 13y agoLove it!
- executive 13y ago=D
- 13throwaway 13y agoThe inevitable link everyone will look for next: https://github.com/tlrobinson/WebSaver https://github.com/tlrobinson/WebSaver
- the_cat_kittles 13y agois there a way to do this for desktop image?
- ygra 13y agoAnd now we come full circle to IE's ActiveDesktop?
- chriscareycode 13y agoLove it
- daredevildave 13y agoI loved this screensaver. A couple of years ago it was rebuilt in WebGL too: http://apps.playcanvas.com/will/arthacksf/toasters http://apps.playcanvas.com/will/arthacksf/toasters
- ChuckMcM 13y agoInteresting 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.
- kalleboo 13y agoThe version I remember (from the Mac Classic) didn't do any of that http://www.youtube.com/watch?v=SWV-que3tRU#t=99 http://www.youtube.com/watch?v=SWV-que3tRU#t=99
- jack_jennings 13y agoNow do Daredevil Dan
- bryanbraun 13y agoHa ha. Some of my favorites (like Marbles or Confetti Factory from After Dark 2.0) would be pretty tricky with only CSS.
- mistercow 13y ago>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.
- gargarplex 13y agoI welcome CSS recreation posts always, but I especially like the "how I did it" break down. Thanks.
- Kiro 13y agoDoesn't work very well on Android Stock Browser.
- eric_h 13y agoThat is true of many things...
- Theodores 13y agoI 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'!
- Joeri 13y agoThis brings back memories. Whatever happened to screensavers? It seems like nobody uses them anymore. My favorite was always johnny castaway though.
- morsch 13y agoWe 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.
- RexRollman 13y agoThat's awesome. I had the After Dark pack on my very first computers, a Powerbook 100 and a IIsi.