Lemmings CSS Animation

Add walkers with the button below or __walker.add(). Drag one to carry it, flick it to throw it. Resize the window and walkers ride the surface they're standing on, so a fast resize launches them.

Stairs#

Stairs too tall to climb#

Floating platforms#

Pit#

Walls#

Cards#

These wrap onto new rows as the window narrows, which shoves anyone standing on them.

Card one

Borders are solid. Walk the top edge or get trapped inside.

Card two

Buttons and form fields are solid too.

Card three

Text is a floor you can land on but walk through.

Card four

Throw a walker up here.

Cage#

Reading#

Columns of text reflow a lot when the window changes size, so this is a good place to try a resize launch. Each line of text is its own floor. Walkers can drop from line to line, fall off the end of a short line, and land on whatever is below.

Lines sit closer together than a walker is tall, so text never blocks them. Only borders, boxes, buttons, images and fields do. That keeps walkers from getting stuck between two lines of a paragraph.

Near the bottom of the page there is one long floor to catch anything that falls all the way down.