This tutorial shows you how to add a parallax scrolling effect to front page 1, 3, 5 & 7 background images so they move at a different speed to the overlaying content when scrolling the front page of the Infinity Pro child theme by StudioPress.
When screen widths are 1180px and smaller, the image background will scroll.
#Demo Video
Shows the images behind the front page image sections moving at a different speed to the widget content creating a parallax effect on scroll.
Note : Tested using the Infinity Pro child theme by StudioPress however the CSS may need modifying for use in other Genesis child themes.
#Parallax Installation
There’s 3 steps relating to usage of the files in the download folder :
Is there a video that shows me how to do this exactly? I thought that is what we were getting tutorials on how to add parallax to the website.
Jules. Please send access details and i’ll install the code for you.
I sent an email this morning.
Hi Brad, is it possible to have the parallax effect for the Studio Pro theme too? Thanks!
Hello Samara. On which image?
I have followed all the steps, Brad, but the parallax effect is not showing on this site I am working on:
https://www.strive.construction/
I cleared the cache and tried different browsers too. Any idea where I might have skipped a step?
Thanks,
Cemal
I got it working by copying the parallax.js to the theme root rather than the folder indicated in the instructions, js folder. It now behaves as expected, thank you.
Cemal
Updated the path to the parallax.js file in the front-page.php file.
Thanks, Brad. I will download the new files and stay in sync with your updates.
Cemal
Hi, I’ve implemented this effect, and it works great on desktop, but on mobile the background image is zoomed in and not displayed correctly. Is there a fix for mobile?
Brad, it looks fine on smaller screens on the demo https://my.studiopress.com/themes/parallax/#demo-full
However, your images may be different. You can use CSS to modify the default effect at any screen width.
Otherwise, please link to your site and i’ll take a look.
Ok, thanks for your help.
Here’s a link to the site’s homepage with the parallax image: https://www.poshcakesbakery.com/
Looks ok to me. You could use CSS to display a different image on mobiles however it will need to cover the widget content and i doubt you’ll fit it all in on smaller screens.
Hi Brad, I’m a new member, no specific questions yet but might do in a week or so. Just saying hi and also thanks for this tutorial – I tried this yesterday and it works like a charm, really improves the look of the theme.
Hi Gill. Back from annual leave now if you need any help.