- This topic has 7 replies, 4 voices, and was last updated 3 years, 2 months ago by Robbert.
-
AuthorPosts
-
July 21, 2020 at 6:09 am #1370700Elzanne Botha
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.
July 21, 2020 at 6:51 am #1370748DavidStaffCustomer SupportHi there,
the Parallax feature actually uses the background-position property to create the effect. So unfortunately you cannot adjust the position and use parallax..
July 22, 2020 at 6:04 am #1372038Elzanne BothaThank 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?
July 22, 2020 at 6:17 am #1372059Elzanne BothaI 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…
July 22, 2020 at 7:47 am #1372136DavidStaffCustomer SupportThe 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.
February 20, 2021 at 6:03 am #1665483RobbertYeah, 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.
February 20, 2021 at 11:55 am #1665944TomLead DeveloperLead DeveloperHi there,
Feel free to share the script if you’d like – always willing to improve things if needed 🙂
February 21, 2021 at 2:45 am #1666292RobbertSample 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.
-
AuthorPosts
- You must be logged in to reply to this topic.