nicholasdixon

I found a solution

I added a bit of simple code does what I wanted

$ = jQuery.noConflict();

$(document).ready(function(){
    $(window).scroll(function(){
    $(".hero").css("opacity", 1 - $(window).scrollTop() /1000);
  });

});

I am trying to do something similar, I have a photograph on the homepage that fills the whole view port. I want it to fade out after the user scrolls down about 300px and to fade in as the user gets near the top.

my test Website is https://nootech.co.uk/three/

the code on the front-page.php template is:

<code></code><div class="hero">
    <div class="text-center">
      <h1 class="myh1"><?php bloginfo( 'name' ); ?></h1>
    </div>
  </div><!-- End of hero div -->

the CSS is:

.hero {
    background-color: #c0c0c0;
    background-image: url(images/home-header.jpg);
    background-position: center;
    background-size: cover;
    color: #ffffff;
    height: 100vh;
    overflow: hidden;
}

I have tried various solutions that I have found on the Web but none work with my code.