WP SITES

Quote

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

—

by

Brad Dalton

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 :

Register for full access

Related Tutorials

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

  1. David Bega Avatar
    David Bega

    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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Hello David. What happens if you wrap the CSS rules in a media query like this :

      [code]
      @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%;
      }

      }
      [/code]

      Change the 480px to suit your own requirements.

      Reply
      1. David Bega Avatar
        David Bega

        Hi Brad,
        Thanks for your supper quick response!!
        Wrapping the CSS rule worked well

        Reply
    2. Brad Dalton Avatar
      Brad Dalton

      You could also load the jquery based on window width like this

      [code]
      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”);

      }

      });

      });
      [/code]

      Reply
  2. macrunner Avatar
    macrunner

    It works great, thank you!

    Reply
  3. macrunner Avatar
    macrunner

    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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      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?

      Reply
      1. macrunner Avatar
        macrunner

        For example on the Blog page: https://demo.studiopress.com/essence/articles/
        and single post: https://demo.studiopress.com/essence/simplicity/

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          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:

          [code]
          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’ );
          }

          }
          [/code]

          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/

          Reply

Was This Tutorial Helpful?