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

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