Easier scrollytelling with position sticky


46 bookmarks. First posted by pbeshai 12 days ago.


One of the biggest implementation pains with scrollytelling is the sticky graphic pattern, whereby the graphic scrolls into view, becomes “stuck” for a duration of steps, then exits and “unsticks” when the steps conclude. This post will focus on the easiest solution we’ve come up with yet: offloading the sticky complexity to CSS, using position: sticky.
css  cssbasics  sticky  scroll  javascript 
yesterday by spaceninja
About using position: sticky for scrolling events
webdesign  web  design  css  position  sticky  fixed 
2 days ago by piperh
By Elaina Natario and Russell Goldenberg - Jun 2018
articles  CSS  layout 
4 days ago by mycotn
Leaning on CSS to simplify the process.
animation  css  javascript  scrollytelling  webdesign  webdevelopment 
4 days ago by garrettc
I'm working through some product landing pages for my pocket notebooks and I really like the things you can do with position: sticky without having to worry about fixing things when it's not supported (it's an enhancement and degrades wonderfully). This tutorial shows how you can use some graph related graphics and control them through the scrolling story.
newslettered  313  tutorial  animation  javascript 
5 days ago by justinavery
Why use Sticky?
The short version: when using the sticky graphic pattern, you need a bunch of JavaScript to handle the stuck state, dimensions, etc.. With this approach, that is all done with (minimal) CSS. This means less bugs, less maintenance, and more happiness.
animation  css  javascript  sticky 
5 days ago by abberdab
Leaning on CSS to simplify the process. June 2018 We’ve written a lot about scrollytelling here at The Pudding. We’ve covered everything from a library…
from instapaper
5 days ago by kohlmannj
Sticky position
work  css 
6 days ago by bfulop
on scrollytelling
css  javascript  animation  webdesign 
6 days ago by jshwlkr
Easier scrollytelling with position sticky
bpi 
7 days ago by fabbianni
Easier scrollytelling with position sticky. #CSS #frontend #design #webdesign ℅ CSS Layout News.
ifttt  facebook  webdesign  frontend  CSS  design 
7 days ago by zeldman
Easier scrollytelling with position sticky. ℅ CSS Layout News.
from twitter_favs
7 days ago by Mediapeople
Scrollytelling just got easier. New tutorial with @elainanatario
7 days ago by timk
Favorite tweet:

Easier scrollytelling with position sticky :: https://t.co/xpCMuG8aLP

(Super cool interactive article.)

— CSS-Tricks (@Real_CSS_Tricks) June 8, 2018
IFTTT  Twitter 
9 days ago by siggiarni
How to use CSS to simplify designing scrolling story elements
animation  css  javascript  sticky 
10 days ago by ste
Bar is 10% Bar is 90% Bar is 50% via Pocket
IFTTT  Pocket 
10 days ago by domingogallardo
Leaning on CSS to simplify the process.
Animation  scrolling  sticky 
11 days ago by phed
Easier scrollytelling with position sticky ::

(Super cool interactive article.)
from twitter_favs
11 days ago by zenm
Using CSS to graphics around. Interestingly, I'm guessing that Elm could do this more reliably and more easily
css  javascript  sticky  elm 
12 days ago by scottnelsonsmith
Leaning on CSS to simplify the process.
css  scrollytelling  javascript 
12 days ago by heymatthenry
Scrollytelling just got easier. New tutorial with
from twitter_favs
12 days ago by pbeshai