My parallax JS

parallax.html

<div class="box-three parralax" id="parallax-three">
    <div class="container">
        <h2>Bla bla</h2>
    </div>
</div>

parallax.js

//My own parallax implementation, I didnt like the other ones

function parallax(id) {

    var parallax = document.getElementById(id);
    var speed = 0.5;


    var bounding  = parallax.getBoundingClientRect();
    var offset = parallax.offsetTop * speed;

    if (bounding.y < bounding.height) {

        var windowYOffset = window.pageYOffset;
        var elBackgrounPos = "50% " + (windowYOffset * speed - offset) + "px";

        parallax.style.backgroundPosition = elBackgrounPos;
    }


}

window.addEventListener("scroll", function() {
    parallax("parallax-three");
});

style.scss

.box-three {

  &.parralax {
    background-image: url("../img/bg-three.png");
    background-size: cover;
    background-repeat: no-repeat;
    max-height: 100vh;
  }
}