How to add Parallax Scrolling effect to Header Hero in Essence Pro

Post author By Brad Dalton
Post date July 22, 2018
9 Comments on How to add Parallax Scrolling effect to Header Hero in Essence Pro

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 :

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 :

@media only screen and (min-width: 480px) {

.header-hero {
    background-attachment: fixed;
    background-color: transparent;
    background-position: 50% 0px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size:    cover;
    background-size:         cover;
}

.header-hero {
    display: table;
    height: calc(100vh);
    overflow: hidden;
    padding: 0;
    table-layout: fixed;
    text-align: center;
    width: 100%;
}

.header-hero .full-height {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

}

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

jQuery(function( $ ){

$(window).bind("load resize scroll",function(e){

if ($(window).width() > 480 ){

scrolltop = $(window).scrollTop()
scrollwindow = scrolltop + $(window).height();

$(".header-hero").css("backgroundPosition", "50% " + -(scrolltop/6) + "px");

}

});

});

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?

It is very complicated to apply to other pages, specifically the Blog and single posts with featured image?

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:

add_action( 'wp_enqueue_scripts', 'enqueue_parallax_script' );
function enqueue_parallax_script() {

	if ( ! wp_is_mobile() || ! is_singular() || ! genesis_is_blog_template() ) {
		wp_enqueue_script( 'parallax-script', get_stylesheet_directory_uri() . '/js/parallax.js', array( 'jquery' ), '1.0.0' );
	}

}

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/

#Solution 1 – Demo Video

#Solution 2 – Demo Video

#Installation ( Solution 2 )

Related Tutorials

9 replies on “How to add Parallax Scrolling effect to Header Hero in Essence Pro”

Leave a Reply Cancel reply