Playing Card That Turns on Scroll in CSS
King of Hearts on scroll by Ben Evans on CodePen
Open on CodePen ↗A hand-drawn King of Hearts playing card that turns as you scroll. Ben Evans first made it to play on hover, but that was a bit jittery, so he swapped the hover trigger for animation-timeline: scroll() and fixed the card in place on a taller page.
Everything is CSS, including the card face. The king's hair is layers of box-shadow with no blur, and the card back is a single element.
artscroll-drivenanimation-timelinebox-shadow
The modern.css newsletter
New CSS each month, and new things in the Atlas. 806 subscribers. Past issues
More like this
See all →- scroll-driven
by Cyd StumpelGekke zoom dingen
Scroll to zoom deep through layers, parallax with a twistscroll-drivenanimation-timelinezoomscale - scroll-driven
by Chris BolsonCircular typographic scramble
Scroll and scattered letters snap into a circular sentencescroll-driven3Danimation-timelinesibling-index() - animation
by Kiarash ZarinmehrDancing skeleton
A small skeleton that never stops dancinganimationarttransformborder-radius