Hi!
I have a following html structure
<section class="why">
<div class="why__contour">
<h2 class="why__text">some title</h2>
<div class="why__grid">
<p class="why__grid-element why__grid-element_profession">
some text
</p>
<p class="why__grid-element why__grid-element_travel">
some text
</p>
<p class="why__grid-element why__grid-element_points">
some text
</p>
<p class="why__grid-element why__grid-element_knowledge">
some text
</p>
<p class="why__grid-element why__grid-element_intouch">
some text
</p>
<p class="why__grid-element why__grid-element_consult">
</p>
<p class="why__grid-element why__grid-element_snacks">
some text
</p>
</div>
</div>
</section>
Inside a section there is a contour(container) inside of which there is a simple grid.
I want this grid to move in response to mouse scrolling or movement of the scroll bar. Not across the screen, but a little closer to the border of the contour(container) when the user scrolls down and a little further when the user scrolls the page up.
Like in this screenshot:
In order to do so I tried to manipulate margins of grid in relation to scrolling with this function, but it seems that it is not a viable solution
function parallax() {
var s = document.querySelector(".why__grid");
console.log(s);
var yPos = 0 - window.pageYOffset / 5;
s.style.marginTop = "50px" + yPos + "%";
}
parallax();
window.addEventListener("scroll", function () {
parallax();
});