Update on October 02, 2016: It is recommended to follow https://sridharkatakam.com/parallax-scrolling-effect-genesis-using-parallax-js/ instead.
Want to apply the Parallax effects of Parallax Pro in other Genesis child themes?
In this article we shall
- register two widget areas, Parallax Section Below Header and Parallax Section Above Footer
- hook these widget areas into genesis_after_header and genesis_before_footer locations respectively
- specify the widget areas in parallax.js
- set the background images for both the sections
Register widget areas and hook them in place
Add this in functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Great tutorial!
How about if I also wanted to add the “Smooth Scrolling” navigation effect like that of Modern Portfolio Pro?
Basically when the link is clicked it would then scroll down to the pertaining section on the homepage.
Instead of a class, use a ID for the sections you would like to smooth scroll to. Then use http://www.sridharkatakam.com/smooth-scrolling-page-sections-using-page-scroll-id/ or http://www.sridharkatakam.com/smooth-scrolling-page-links-genesis-theme/.
Great tutorial Sridhar! I’ve got it all working here: http://focus5design.com/
Question – how would I apply this to divs on other pages?
There is no home page specific code in the above article. You just need to copy and paste http://pastebin.com/raw.php?i=dkC9aE7q or http://pastebin.com/raw.php?i=92cANt17 depending on whether your sections are above the fold or below and change the selector(s).
Hi Sridhar ( and Patrick too!)
Could you elaborate on this for me, trying to understand how I would be able to make this home page specific as well as make page specific so that different pages could display different parallax images? Would this be best served through making page templates.
Quite a learning curve but cannot thank you enough for your wonderfully helpful tutorials and info.
Best regards,
Mark
nice job!
Nice tut Sridhar, how can I share same background image between two consecutive elements in parallax ?
Wrap both sections in a div and specify its class/ID in parallax.js. You would also specify the background image for this wrapper div in style.css.
Awesome Sridhar – any chance you could do a similar tut for Builder?? Thanks for all your help and advice over the years.
-Brian
Sridhar, thank you for this tutorial. Do you know how to manage with parallax on mobile devices?
Try removing the
if ( ! wp_is_mobile() ) {and
}conditional in functions.php.
I agree with Brian: is there a way to do this with DWB?Thanks!
Hi – Thanks for this extremely useful post. Got Parallax working wonderfully on my Dynamik Website Builder site I’m building. However, unlike on the Parallax Pro theme, my background is jerkily moving on iPad and iPhone – any idea how to stop this?
Can you provide the URL of your site?
Yes, of course. It’s http://honoroakbark.co.uk – thank you!
Hi Sridhar, first of all, thank you for all the fantastic tutorials!
I’m playing around with Centric Pro today and thought this would be a cool theme to add parallax effect to. However, after following these steps, the background images don’t use the parallax effect, and the shrinking header no longer shrinks.
Any thoughts?
Thanks again so much!
Ted
Hi Sridhar, disregard my last comment. I was able to add the parallax effect to Centric Pro using your recent tutorial on adding it to Enterprise Pro.
Man, you are very kind and generous to offer these tutorials on your site! Thank you so much!!!
Ted
Hi Sridhar,
Your tutorials are simply awesome! I am relatively new to Genesis and I was wondering how can you add the after_header parallax effect and before_footer for Centric Pro? I have made a mess and I am back to square 1, thank you so much in advance!
Cheers,
Antxon
http://www.sridharkatakam.com/add-parallax-background-header-footer-sections-centric-pro/
Brilliant, Sridhar!
Thanks for this. I also see that you have used Scrolldown animation on this site. When I scroll down, I can see the SUBSCRIPTION BOX increasing it’s size and getting back to normal again. Can you please tell us how to use that in Genesis framework?
Example 3 at http://www.sridharkatakam.com/scroll-animations-wordpress-using-animate-css-jack-box-waypoints/
[…] the comments of my post titled How to apply Parallax effect from Parallax Pro in any Genesis theme Antxon […]
Hello Sridhar, thanks for the great tutorial. The widgets are showing up on my blog posts page, how can I get these widgets to only display on the homepage?
Thanks,
Simon
Got it, thanks
Hi Simon,
Could you please advise on how did you manage to fix the images from showing on your blog post page?
Thanks in advance.
Got it! Thanks guys!
Hi Antxon,
You can make the widgets hook only on the homepage like so:
//* Hooks parallax-section-below-header widget area after header
add_action( ‘genesis_after_header’, ‘contactsection’ );
function contactsection() {
if ( ! is_home() )
return;
genesis_widget_area( ‘contactsection’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
So this piece of code is what isolates them to the homepage:
if ( ! is_home() )
return;
If you use what Simon’s example, the widgets will hook in if the page is the blog posts index page. If you specified a static front page use if
( ! is_front_page() )
return;
Great tutorials as always!
I was wondering, I’ve just implemented Parallax Pro for my own blog. Is there a way to use a custom header image for each post, the way that Medium does:
https://medium.com/life-tips/494224e0f983
Or how the new Ambiance Pro theme does it:
http://demo.studiopress.com/ambiance/mobile-responsive/
Or how Dustin Stout did it on his use of Parallax Pro:
http://dustn.tv/stunning-reading-experience/
Thanks!
http://www.sridharkatakam.com/medium-like-full-view-featured-image-genesis/
Awesome, thank you! 🙂
[…] Danny asked, […]
Could you please do the tutorial for Dynamik Website Builder please if you get a chance?
Thank you in advance.
How about if I want to show different pictures for different pages? I have set up a new widget area for a second page but cant figure out how to hook it properly so it has a different image.
Hello Sridhar! Nice, nice tutorial! I’m completely new to genesis! I’m setting up a website for my self and i saw your tutorial! I’m using Agency Pro for it. I manage to get the Parallax effect to work but i get the same effect for all my pages! And i ‘d like to have it only in the home page or maybe just in some pages.
Thanks in advance!
I found the answer on the comments! But i have a problem now! The pictures on the parallax sections doesn’t resize on the iphone and ipad! Any thought why this happen? I followed your tutorial but seems to be i’m the only one with this problem.
I am having the same problem. Parallax Photos for both sections do NOT resize on iPhone or iPad. Did anyone ever figure out a solution for this?
Hi Sridhar,
I’ve tried to implement this using the Genesis Sample Child Theme without success. I’ve copied the code as specifically shown in the Git, but it doesn’t appear to be outputting the HTML.
I’m trying to use this as well as the widgetized home page for the Sample Theme to have the parallax images show below header and above footer, with the home page widgets between the two areas.
Any help would be greatly appreciated.
I’m working in a sandbox on WPEngine, if needed I could send you a link privately.
Thanks for your time and fantastic info.
Mark
Got it working! Thanks again for all your time and wonderful tutorials.
Warmest regards,
Mark
Hi Sridhar,
Is there a way to make this home page specific?
Thanks,
Mark
Hello, great tutorial ! how can I setup the background image only for homepage or front page?
You’ll want to add
( ! is_front_page() )
return;
inside your hook function. For example:
//* Hooks parallax-section-below-header widget area after header
add_action( ‘genesis_after_header’, ‘parallax_section_below_header’ );
function parallax_section_below_header() {
if ( ! is_front_page() )
return;
genesis_widget_area( ‘parallax-section-below-header’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
You may want to paste the code at pastie.org or pastebin.com and paste the link here.
How would you ad the other Widget areas ?
This may be helpful to some.
I created a step-by-step tutorial showing how to set up a widgetized homepage with parallax-style backgrounds using Dynamik Website Builder: http://focus5design.com/tutorials/create-custom-widgetized-homepage-parallax-style-backgrounds-using-dynamik/
Hit me up if you have any questions about getting this to work in Dynamik.
Excellent tutorial – I’m also new to Genesis, and whilst there is a little bit of a learning curve, you site have been a fantastic resource these past few days as I’ve been re-designing my site. I’ve managed to implement the parallax effect on a Minimum Pro child theme which you can see here: http://www.photoproseo.com.
I’ll be doing a blog post on why I switched to Genesis from Headway, and I’ll be sure to put in a link to your site within the article.
Cheers
Alan
Thanks for this tutorial! One question – is there a way to add this to a page template for just one interior page of a site using a Genesis Child theme? Building a custom site for an author who wants to feature Parallax-type images and scrolling on her book page only.
Hi, I’m working on a new site with the magazine pro theme. I implemented this code and it works fine in the browser. Only on the iPad it is showing an very BIG picture and you just see a little of the picture. Is there a solution for this?
It’s on http://demo.nederweert24.nl and it’s a clean instal with some plugins.
Thanks already!
Sridhar, awesome tutorial. Thank you so much.
How can I use this in a custom home page and basically get rid of the normal lope and instead have these 2 new widgets and perhaps 3-4 new ones (normal ones without the parallax) show up in the home page?…
I would appreciate any help. I have been spending the past 2 weeks trying to get this working, but being so new to Genesis, I just can’t get it to work. Thanks in advance.
I already have parrallax pro as my theme. Does this tutorial still apply if I want to use the parrallax effect for my landing pages?
Hi, Sridhar, great tutorial. but I tried do this parallax effect + http://sridharkatakam.com/displaying-fixed-navigation-menu-upon-scrolling-genesis/ but I get some jquery conflict? how to make it work? sorry
I’m curious if you think it is better to start with parallax pro and add widgets to the home page or if it’s easier in the end to add parallax scrolling (as taught here) to a theme that already has those features. I’m getting totally hung up on this.
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. -josh
Hi Datic,
I will look into this tomorrow and reply.
Follow https://sridharkatakam.com/parallax-effect-front-page-background-image-digital-pro/.
[…] the comments section of How to apply Parallax effect from Parallax Pro in any Genesis theme a user […]
Hello Sridhar,
I’ve got this following error : Cannot read property ‘top’ of undefined
Regarding this line “// Section Above Footer
if( scrollwindow > $(“.parallax-section.above-footer”).offset().top ) {”
Do you have any of how to solve this error ?
Thanks for your tuts 🙂
There is a better way of implementing Parallax effect than the one I wrote here. I’ll publish a tutorial in the next few days and post an update.
Hi Sridhar, is there any chance that your new tutorial will be able to include multiple parallax sections on a page without having to declare their classes specically in the JS? For example, if I use an ACF repeater field to create multiple parallax sections on a page, all with a class of .parallax-section, could the parallax effect be applied globally to all of them?
Thanks in advance
David
Yes.
Check out https://sridharkatakam.com/parallax-scrolling-effect-genesis-using-parallax-js/
Great, thank you!
Hello Sridhar,
I’m having trouble figuring out how to size the background properly on iOS device. I know that “background-size: cover” in CSS is known to not work on iOS browsers, but I can’t figure out what to use (“100%” dont work either). Right now I only see a part of my backgrounds on iOS devices.