* { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } article { position: relative; padding: 0 1rem; max-width: 20rem; } figure { position: -webkit-sticky; position: sticky; width: 100%; margin: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background-color: #8a8a8a; z-index: 0; } figure p { text-align: center; padding: 1rem; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 8rem; font-weight: 900; color: #fff; } .step { margin: 0 auto 2rem auto; background-color: #3b3b3b; color: #fff; } .step:last-child { margin-bottom: 0; } .step.is-active { background-color: goldenrod; color: #3b3b3b; } .step p { text-align: center; padding: 1rem; font-size: 1.5rem; } STEP 1 STEP 2 " />

A scrollyteller

STEP 1

STEP 2

STEP 3

STEP 4

x

STEP 5

0