51–60 of 63 posts
That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
I've put together an example here but it doesn't seem to work in Firefox 151.0.2 (64-bit): https://favs.eu.org/parallax/ Edit: if the body has class="no-sda", it uses a js fallback.
Mac on latest chrome.
Earlier quoted context omitted.
I've put together an example here but it doesn't seem to work in Firefox 151.0.2 (64-bit): https://favs.eu.org/parallax/ Edit: if the body has class="no-sda", it uses a js fallback.
This doesn't do anything, just scrolls like a normal page. Mac on latest chrome.
Earlier quoted context omitted.
I've put together an example here but it doesn't seem to work in Firefox 151.0.2 (64-bit): https://favs.eu.org/parallax/ Edit: if the body has class="no-sda", it uses a js fallback.
This doesn't do anything, just scrolls like a normal page. Mac on latest chrome.
How does this compare to the classic css-native parallax effect? Before the scroll timeline APIs you'd use the "perspective" css property to create a container where the z plane is n pixels away from the screen, and then position each layer within it at a different z distance using transform: translateZ That method is GPU accelerated too, so it is performant compared to some js solutions, and has worked well in every…
That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
I've put together an example here but it doesn't seem to work in Firefox 151.0.2 (64-bit): https://favs.eu.org/parallax/ Edit: if the body has class="no-sda", it uses a js fallback.
and how do I know if I'm hitting the fallback?
That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
I've put together an example here but it doesn't seem to work in Firefox 151.0.2 (64-bit): https://favs.eu.org/parallax/ Edit: if the body has class="no-sda", it uses a js fallback.
You did leave that part out of your recipe though. Would you mind adding it there, so that people who copy paste are more inclined to actually keep/use that part as well?
Earlier quoted context omitted.
I've put together an example here but it doesn't seem to work in Firefox 151.0.2 (64-bit): https://favs.eu.org/parallax/ Edit: if the body has class="no-sda", it uses a js fallback.
I really like the fact that your "recipe" already includes support for prefers-reduced-motion. Parallax can really trigger motion sensitivity issues up to vomiting or several days of bed rest with severe migraine. You did leave that part out of your recipe though. Would you mind adding it there, so that people who copy paste are more inclined to actually keep/use that part as well?