Is there any way to make an image comparison slider / onion skin view *without* JavaScript?
-
@sl007 perfect ta!
-
Zach Leatherman :11ty:replied to Terence Eden last edited by
@Edent @chriskirknielsen @Jamessw alluded to a more modern approach this week in a conversation—maybe they can link it up!
-
Marius Gundersenreplied to Terence Eden last edited by
@Edent could you set the background image of an element and rely on resize? https://developer.mozilla.org/en-US/docs/Web/CSS/resize
-
Maxi :coffeebeans: :comfyblobcat:replied to Terence Eden last edited by
@Edent this one by @anatudor only uses a bare minimum of JS to update a CSS variable: https://mastodon.social/@anatudor/112956544344219661
-
[email protected]replied to Zach Leatherman :11ty: last edited by
@zachleat @Edent @chriskirknielsen Here it is with anchor position and a range slider- https://codepen.io/jamessw/pen/wvbPBQG
Zero 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
-
-