This tutorial provides 2 different ways to add the parallax effect to the Header Hero on the Essence Pro themes front page.
Firstly, here’s the demo video showing how the 1st solution works :
#Solution 1 – Demo Video
Shows the header hero image on the Essence Pro themes front page fixed on scroll. Not exactly a parallax scrolling effect unlike the 2nd solution.
#Solution 2 – Demo Video
The 2nd solution shows the header hero background image moving at a different speed to the content while scrolling.
#Installation ( Solution 2 )
There’s 3 steps relating to usage of the files in the download folder :
Register or login to access the download folder and installation support :
9 replies on “How to add Parallax Scrolling effect to Header Hero in Essence Pro”
Hi Brad,
Thanks for having great tutorials as this one on your website!!
I implemented the Parallax both on Header Hero Image as well as on single pages.
It works well on all browser but images get distorted on Mobile and especially on IPhones.
I would like to be able to load the Parallax script on Desktop version only and ignore it on Mobile devices.
Could you be kind to provide a solution for that
Thanks
David
Hello David. What happens if you wrap the CSS rules in a media query like this :
Change the 480px to suit your own requirements.
Hi Brad,
Thanks for your supper quick response!!
Wrapping the CSS rule worked well
You could also load the jquery based on window width like this
It works great, thank you!
Hi Brad,
nice tutorial and it works great.
It is very complicated to apply to other pages, specifically the Blog and single posts with featured image?
Thank you so much
The tutorial is written to add Parallax to the Header Hero on the front page. Not other pages.
To add Parallax to the header hero on other pages, you would need another solution.
What do you mean by this?
For example on the Blog page: https://demo.studiopress.com/essence/articles/
and single post: https://demo.studiopress.com/essence/simplicity/
To apply parallax to the header hero on other pages is very simple.
1. Load the parallax.js script on the pages you want. Example:
This PHP will need to go in your functions file. It loads on the single posts/pages and blog page template. Ot won’t work on other pages unless you change the conditional tags.
2. Add the CSS from the download folder to the style.css file so its loaded on all pages. As it stands, the CSS is only applied to the front page when its included in the style-front.css file.
If you can’t manage this, please let me know and i’ll install the code for you. https://wpsites.net/web-design/apply-parallax-to-header-hero-on-any-page-type-in-essence-pro/