Archived topic
Parallax on Featured Image
3 replies · Started by EcoDev on February 1, 2021
Hello, is it possible to apply the parallax effect to a Featured Image (not a Background Image)? I'm wondering whether the GP parallax.js can be tweaked to use object-position instead of backgroundPositionY?
I want to do this to benefit from srcset which doesn't work on a background image.
Thanks
Hi there,
I'm not sure I fully understand what you mean.
The parallax script was written for the background-image property.
Are you trying to apply it on a specific <img> element (featured image)? If so that's quite tricky to do as you'll have to control the <img> actually position on the page and it this may potentially cause CLS issues.
If I may suggest:
You can make the <img> tag behave like a background-image by setting its position to "absolute" and it's parent element to "relative" with a defined height.
You then apply the script that "parallaxes" its top or bottom position.
As for providing the actual custom script, this kind of site customization is outside of our scope, unfortunately.
Thanks Elvin, I'll give that a shot. Yes I was trying to apply the parallax effect to a specific image but hadn't considered CLS issues. And apologies, I thought it was worth asking in case you already had some script :)
Thanks again
No problem. :)
