This content originally appeared on Bram.us and was authored by Bramus!
Back in October I was at Full Stack Europe in Antwerp. One of the talks I gave covered how I recreated Cover Flow using only HTML and CSS, thanks to Scroll-Driven Animations.
~
💡 The feature covered in this post is formerly known as Scroll-Linked Animations, before it got renamed to Scroll-Driven Animations back in December. While this post uses this new name, the slides and recording do not as they predate the rename.
~
# The Talk
The talk I gave is a lighting talk of about 5 minutes introducing Scroll-Driven Animations. The talk revolves around a central Cover Flow demo implemented using only HTML and CSS. On the CSS side, it uses Scroll-Snapping, CSS Animations, and Scroll-Driven Animations. The recording is embedded below:
💁♂️ If you want to know more about Scroll-Driven Animations – this talk only touched the surface of what’s possible – be sure to check out this episode of HTTP203.
~
# Slides
The slides of my talk are up on slidr.io are embedded below:
~
# Demo
The demo used for this talk is available on CodePen. Although Scroll-Driven Animations are not supported (unflagged) in any browser at the time of writing, the demo above works thanks to a polyfill that’s being loaded.
See the Pen ✅ Scroll-Linked Animations: Coverflow (CSS view-timeline 2022 Version) by Bramus (@bramus) on CodePen.
~
# Thanks!
Thanks go out to organizers Dries, Freek, and Rias for having me again. Just like the previous edition in 2019, the conference was of high quality again. Having a history in PHP and Cloud, I really liked the set of talks they selected for the conference.
Hopefully you all had fun attending my talk — I know I had making it (and whilst bringing it forward) — and perhaps you even learned something from it along the way 🙂
~
💁♂️ If you are a conference or meetup organiser, don't hesitate to contact me to come speak at your event.
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2023-02-12T08:05:03+00:00) Scroll-Driven Animations: Cover Flow (2022.10.06 @ Full Stack Europe). Retrieved from https://www.scien.cx/2023/02/12/scroll-driven-animations-cover-flow-2022-10-06-full-stack-europe/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.