In the comments section of How to apply Parallax effect from Parallax Pro in any Genesis theme a user asked,
Hi Sridhar,
I signed up specifically for this tutorial because described being able to apply the parallax effect to ANY Genesis theme but it doesn’t work on ‘Digital Pro’. I think it has to do with the backstretch.js script but I’m not sure. Any chance I can get you to create an “amended” tutorial for ‘Digital Pro’? Any help would be very appreciated.
In this tutorial I share the steps for replacing the backstretched image set in customizer appearing as the background for Front Page 1 widget area with a standard background image and add in the necessary code taken from Parallax Pro for the parallax effect in Digital Pro.
We will code this up such that image set in customizer will continue to be used and displayed as the background image for .front-page-1.
Step 1
In front-page.php replace
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
You’re a good man Sridhar. Thank you.
Hey Sridhar, should the changes in this tutorial be made after completing https://sridharkatakam.com/apply-parallax-effect-parallax-pro-genesis-theme.
Or does the parallax.js file from Parallax Pro just need to be added to the proper folder and edited after completing the changes in this code?
No.
Just implement the steps in this tutorial.
Thanks again for taking the time on this one but it appears something is missing. This tutorial will “fix” the background image but it doesn’t create a parallax effect of the background images variable scrolling speed. I’m working in a .dev enviroment so to be safe from other coding edits I created a fresh WP install w/Digital Pro and then followed the tutorial above but it just creates a static, fixed background image. Seems the code above also justifies this. Will you help?
You are right. I missed including a step in the tutorial. I have updated it now and added it. Check Step 3. I have also included a link to the demo.
Worked perfectly, thanks again.
Hello Sridhar,
I really like it and it is working on desktop/laptop, but when on mobile view it won’t work.
When in responsive view, the background image is changing from position when scrolling.
Is there a way you can look at this?
I am working on a clean .dev environment with no changes to the theme made.
Already fixed it with this:
.front-page-1 {
display: table;
margin-top: 90px;
overflow: hidden;
table-layout: fixed;
width: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center !important;
background-size: cover;