Subtle parallax effect on scroll – client website

I worked on a new website recently that uses a subtle parallax scroll effect on the homepage, so I wanted to briefly explain how the effect was achieved.

The entire banner is the full height of the page using 100vh, and has a container with overflow: hidden;

<div class="hp-banner__wrapper">
    <div class="hp-banner js-parallax-near">
      //--content here scrolls at a 3rd speed
    </div>
</div>

Then Javascript is used on scroll to change the transform: translateY position to be half of the scroll position.

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    $(".js-parallax-near").css("transform","translateY(" +  (scroll)/3  + "px)");
    //$(".js-parallax-far").css("transform","translateY(" +  (scroll)/4  + "px)");

});

The code above has a line for a layer that scrolls even slower that we didn’t use on this website, but could be good for making something look even further away.

There’s also a few other things going on here, the clouds move across (I wrote about this technique in a recent post), and the house bobbing gently up and down. Here’s the animation keyframes for the gentle bob:

@keyframes float-movement {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-20px)
    }
}

.house { 
    animation: float-movement 7s ease-in-out infinite;
}

You can see the website homepage here (correct as of March 2018): www.derbyshiremortgageservices.co.uk