Simple div parallax

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();
});

I’m not 100% clear on what you want from your image. My suggestions are:

  1. Put your code on codepen and post a link so people can manipulate it without have to copy/paste/setup.
  2. Post a link to an example that works since it’s easier to see in motion than on a static image.
  3. Google. I found this almost immediately and it looks thorough and adaptable to scrolling.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.