CSS play

Doing it with Style

INFORMATION

This is a vertical scrolling demostration that has two columns with one on top of the other. One column uses scroll-snap to have a scrolling set of animal images snap into position as you scroll down. The other columns uses position:sticky to have the animal name stick to the bottom of the screen and not scroll with the animal image. All produced with just HTML and CSS, no javascript or jQuery.

Works in all browser including Firefox and iOS Safari - 8th November 2021

ELEPHANT

Elephants are the largest existing land animals

CAMEL

The bactrian has two humps on its back, in contrast to the single-humped dromedary

LION

The lion (Panthera leo) is a large cat of the genus Panthera native to Africa and India

FLAMINGO

Four flamingo species are distributed throughout the Americas

GIRAFFE

The giraffe is the tallest living terrestrial animal and the largest ruminant

LLAMA

The llama is a domesticated South American camelid

OSTRICH

They are large flightless birds of Africa who lay the largest eggs of any living land animal

ORANGUTAN

Orangutans are great apes native to the rainforests of Indonesia and Malaysia