
How I rebuilt "Flying Toasters" using only CSS animations - bryanbraun
http://bryanbraun.com/2014/03/15/how-i-rebuilt-flying-toasters-using-only-css-animations
======
fish2000
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
I 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.

~~~
kalleboo
fish2000 probably remembers an earlier version
[http://www.youtube.com/watch?v=5gD-
JnD1DCo](http://www.youtube.com/watch?v=5gD-JnD1DCo)

~~~
fish2000
That is it totally – I first ran After Dark on my family’s Mac LC II, maybe
about 23 years ago.

------
daredevildave
I 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
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.

~~~
kalleboo
The 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)

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

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

------
13throwaway
The inevitable link everyone will look for next:
[https://github.com/tlrobinson/WebSaver](https://github.com/tlrobinson/WebSaver)

~~~
the_cat_kittles
is there a way to do this for desktop image?

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

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

~~~
morsch
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.

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

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

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

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

------
jack_jennings
Now do Daredevil Dan

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

------
Kiro
Doesn't work very well on Android Stock Browser.

~~~
eric_h
That is true of many things...

------
epynonymous
man, brings back memories from the os9 days

------
chriscareycode
Love it

------
haymills
Love it!

------
executive
=D

------
quahaug
Fucking rad.

