This content originally appeared on Bram.us and was authored by Bramus!
Using @scroll-timeline from the Scroll-Linked Animations Specification, Fabrizio Calderan has created a very nice demo which shows the remaining reading time. As you scroll down, the time counts down to 0.
? Using a browser with no support for Scroll-Linked Animations? Here’s a recording you can watch:
There’s a few tricks Fabrizio uses there to achieve the result:
- Two Custom Properties are animated as you scroll:
--mm(minutes) and--ss(seconds) - Thanks to Houdini’s Properties and Values API, the values for
--mmand--sscan be interpolated between their start and end value. - As it’s not possible to inject the values of Custom Properties using
::after, an intermediate step using CSS Counters is used: the Custom Properties manipulate the CSS Counter values, and the values of those Counters then get injected into the page (similar to what Jhey did in his pure CSS Stopwatch)
Tell your users the remaining reading time, in CSS →
~
?? Unfamiliar with Scroll-Linked Animations / CSS Scroll-Timeline? Here’s two (extensive) articles that explain the whole thing:
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-07-21T21:01:13+00:00) A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline. Retrieved from https://www.scien.cx/2021/07/21/a-pure-css-remaining-reading-time-indicator-with-scroll-timeline/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.