Is there any way to make an image comparison slider / onion skin view *without* JavaScript?
-
Ana Tudor 🐯replied to Maxi :coffeebeans: :comfyblobcat: last edited by
@Sirs0ri @Edent And @css has a take on this using scroll-driven animations and no JS https://codepen.io/t_afif/pen/xxoPYQq
-
@anatudor that's interesting, but looks like it only supports one image. I'll keep investigating.
-
Terence Edenreplied to [email protected] last edited by
@Jamessw very cool! I can't get it to work in FF, but looks good otherwise. Thanks!
-
@Edent The whole aim of this was to use just a single image.
¯\_(ツ)_/¯
-
Zach Leatherman :11ty:replied to Terence Eden last edited by
@Edent @Jamessw requires CSS Anchor Positioning https://caniuse.com/css-anchor-positioning
-
[email protected]replied to Zach Leatherman :11ty: last edited by
-
Terence Edenreplied to [email protected] last edited by
-
[email protected]replied to [email protected] last edited by
@zachleat @Edent Oh, I guess even without anchor positioning, another option would be using `resize`. Here's a rough version with some quirks. https://codepen.io/jamessw/pen/qBzyGro
`resize` isn't available in iOS Safari, but otherwise it's Baseline.
-
Terence Edenreplied to Marius Gundersen last edited by
@gundersen that's very cool - but I couldn't get it working consistently on mobile. Nifty tech though!
-
Terence Edenreplied to [email protected] last edited by
@Jamessw that is supremely cool. I can't get it working on mobile - but perfect for desktop. Ta!
-
Zach Leatherman :11ty:replied to [email protected] last edited by
-
-