これはおっさんほいほい過ぎる! After Darkという名称を聞いて懐かしい!と思う方はどれくらいいるでしょうか。After Darkは元々はMac OSXの、その後Windows版も販売されたスクリーンセーバソフトウェアです。最初は89年から販売されているとのことで、長い歴史があります。 今でこそスクリーンセーバのために有料ソフトウェアを購入する人は少なくなったと思いますが、ディスプレイの焼き付け(液晶では帯電はあっても焼き付きは起こらないようですが)を防ぐためには必要なものです。そんな懐かしのAfter Darkを現代に、しかもスタイルシートで再現したのがAfter Dark in CSSです。

After Dark in CSSのデモ

こちらに様々なスクリーンセーバのデモがあります。

この画面すら懐かしいですね。

フライングトースター!もちろんちゃんとアニメーションしますよ。

フィッシュ。こういうアクアリウム系も多数ありましたね。

地球。回転しながらディスプレイ内を動き回ります。

ハードレイン。雨粒が落ちるアニメーションです。

ワープ!これもよく使われていました。

メッセージ。離席時にその内容を表示したりしていましたよね。

フェードアウト。OS 8風の表示が徐々に消えていきます。

雨。こういうシンプルなのも好きです。

スポットライト。アニメーションが格好いいです。

After Dark in CSSの凄い所はJavaScriptを一切使わずにアニメーションまできちんと実装されている点です。見た目のレガシーさとは裏腹に、使われているテクニックは先端のものになります。その実現方法はかなり参考になる点が多そうです。

After Dark in CSSはスタイルシート製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

After Dark in CSS bryanbraun/after-dark-css