Lemmings CSSアニメーション
Lemmings CSS Animation (markblah.github.io)
要約
このHacker Newsの記事は、CSSアニメーションを用いて「レミングス」のようなキャラクター（ウォーカー）の挙動をシミュレートするインタラクティブなデモを紹介しています。ウィンドウサイズを変更すると、ウォーカーがプラットフォームやテキストの配置に応じて動いたり、落下したりする様子が観察できます。
全文翻訳
ウォーカープレイグラウンド
下のボタンまたは __walker.add() でウォーカーを追加します。ドラッグして連れて行ったり、フリックして投げたりできます。ウィンドウをリサイズすると、ウォーカーはその上に立っている表面に乗るので、速いリサイズはそれらを飛ばします。
階段
登れないほど高い階段
浮遊プラットフォーム
穴
壁
カード
これらはウィンドウが狭まると新しい行に折り返され、そこに立っている人を押し出します。
カード1
境界線は固体です。上端を歩くか、中に閉じ込められます。
カード2
ボタンやフォームフィールドも固体です。
カード3
テキストは着地できる床ですが、通り抜けることもできます。
カード4
ここにウォーカーを投げ上げてください。
ケージ
［画像］
読書
ウィンドウサイズが変更されるとテキストの列は大きく再配置されるため、リサイズ起動を試すのに適した場所です。各テキスト行は独自の床です。ウォーカーは行から行へと落下したり、短い行の端から落ちたり、下のものに着地したりできます。
行はウォーカーの身長よりも近くに配置されているため、テキストがそれらをブロックすることはありません。ブロックするのは境界線、ボックス、ボタン、画像、フィールドだけです。これにより、ウォーカーが段落の2つの行の間で立ち往生するのを防ぎます。
ページの下部近くには、すべてをキャッチするための1つの長い床があり、すべてが一番下まで落ちてきます。