• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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 :

Register or login to access the download folder and installation support :

Register for full access

Related Tutorials

  • Apply Parallax To Header Hero On Any Page Type in Essence Pro

Essence Pro Theme Parallax Pro Theme

Reader Interactions

Comments

  1. David Bega says

    February 15, 2019 at 2:50 am

    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

    Log in to Reply
    • Brad Dalton says

      February 15, 2019 at 3:16 am

      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.

      Log in to Reply
      • David Bega says

        February 15, 2019 at 11:46 pm

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

        Log in to Reply
    • Brad Dalton says

      February 15, 2019 at 3:36 am

      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");
      
      }
      
      });
      
      });
      Log in to Reply
  2. macrunner says

    September 4, 2018 at 9:08 pm

    It works great, thank you!

    Log in to Reply
  3. macrunner says

    September 4, 2018 at 9:21 am

    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

    Log in to Reply
    • Brad Dalton says

      September 4, 2018 at 9:40 am

      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?

      Log in to Reply
      • macrunner says

        September 4, 2018 at 9:50 am

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

        Log in to Reply
        • Brad Dalton says

          September 4, 2018 at 10:18 am

          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/

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags