How I rebuilt "Flying Toasters" using only CSS animations

http://bryanbraun.com/2014/03/15/how-i-rebuilt-flying-toasters-using-only-css-animations

by bryanbraun • 12 years ago

106 31 12 years ago

fish20003• 12 years ago

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.

mikepurvis• 12 years ago

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.

enneff• 12 years ago

Also the untoasted bread would jump into the toasters and come back out toasted.

thomasahle• 12 years ago

I like the one that is juggling with the toast.

fish20003• 12 years ago

I didn't recall the toast overlap! That is quite a bit cooler than my personal “flying toasters“ memory. Thanks for posting that clip.

kalleboo2• 12 years ago

fish2000 probably remembers an earlier version http://www.youtube.com/watch?v=5gD-JnD1DCo

masswerk• 12 years ago

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.

quahaug• 12 years ago

Fucking rad.

epynonymous• 12 years ago

man, brings back memories from the os9 days

judk• 12 years ago

Huh, on Android Browser, the toast flies but the the toasters just animate in place.

nroose• 12 years ago

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

haymills• 12 years ago

Love it!

executive• 12 years ago

13throwaway• 12 years ago

The inevitable link everyone will look for next: https://github.com/tlrobinson/WebSaver

the_cat_kittles• 12 years ago

is there a way to do this for desktop image?

ygra• 12 years ago

And now we come full circle to IE's ActiveDesktop?

chriscareycode• 12 years ago

Love it

daredevildave• 12 years ago

I loved this screensaver. A couple of years ago it was rebuilt in WebGL too: http://apps.playcanvas.com/will/arthacksf/toasters

ChuckMcM• 12 years ago

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.

kalleboo2• 12 years ago

The version I remember (from the Mac Classic) didn't do any of that http://www.youtube.com/watch?v=SWV-que3tRU#t=99

jack_jennings• 12 years ago

Now do Daredevil Dan

bryanbraun• 12 years ago

Ha ha. Some of my favorites (like Marbles or Confetti Factory from After Dark 2.0) would be pretty tricky with only CSS.

mistercow• 12 years 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• 12 years ago

I welcome CSS recreation posts always, but I especially like the "how I did it" break down. Thanks.

Kiro• 12 years ago

Doesn't work very well on Android Stock Browser.

eric_h• 12 years ago

That is true of many things...

Theodores• 12 years ago

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'!

Joeri• 12 years ago

This brings back memories. Whatever happened to screensavers? It seems like nobody uses them anymore. My favorite was always johnny castaway though.

morsch• 12 years ago

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.

RexRollman• 12 years ago

That's awesome. I had the After Dark pack on my very first computers, a Powerbook 100 and a IIsi.

How I rebuilt "Flying Toasters" using only CSS animations

Related Stories