Archived topic
Parallax Effect Not Workin
7 replies · Started by Elzanne Cronjé on July 21, 2020
Good day,
I have two sites with the exact same issue. The section background images are set on parallax, but it is not working.
http://kurkprop.co.za/
http://alum.co.za/
It only works when I set the background-attachment as fixed, but I don't really want that because it does not work in mobile view and is not responsive then.
I have set the sections container background-position to center center, otherwise is not in the middel and not displaying nicely.
If I remove all of the above CSS then parallax actually works, but then the images are not center AND the parallax effect is very, very subtle.
Please assist.
Thank you so much.
Hi there,
the Parallax feature actually uses the background-position property to create the effect. So unfortunately you cannot adjust the position and use parallax..
Thank you, David.
On desktop and tablet, it appears to automatically center the background when I disable the position. However, the mobile view is completely off-center. Is there any way that I could perhaps only center the background image in mobile view?
I have completely removed the background-attachment as fixed, as well as the background-position as center center.
The parallax effect should be working now, but I cannot see anything? It is either not working or waaaay to subtle?
http://kurkprop.co.za/
http://hellofox.co.za/
I also have a parallax background image issue with http://alum.co.za/ - Some of the images are just too large and even portrait, so I need to center center the position otherwise it doesn't display correctly...
The Parallax effect is really subtle, it requires a much taller image than the container size permits. Also it does not trigger until the container reaches the top of the page so there has to be plenty of scrolling left on the page.
And unfortunately there is no filters used on section parallax so we cannot even tweak it.
Yeah, this parallax functionality could really use some love. I replaced it with my own parallax js script which support focal points. 20 lines of js code in total. Could be 15 without comments =).
I never understood why nobody can do parallax correctly. If you are interested let me know and I will share the script.
Hi there,
Feel free to share the script if you'd like - always willing to improve things if needed :)
Sample hero custom parallax: https://digitalspot.shop/
Here is the sample page on which the header image has an custom center-center position and the parallax function starts with the initial background position state. It also works with percentages like 20% 50%, or with no initial state set etc.
I wrote this script because absolutely not a single parallax javascript plugin or function would do what I needed it to do. The script uses the relative image dimensions to check if parallax is possible with the image height.
Line 30 might need some love if you are going to implement this into Generatepress. For my use it is an hardcoded (relative!) height on which to allow parallax of the image.
