Tengo una estructura html siguiente

 <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>

Dentro de una sección hay un contorno(contenedor) dentro del cual hay una cuadrícula simple.

Quiero que esta cuadrícula se mueva en respuesta al desplazamiento del mouse o al movimiento de la barra de desplazamiento. No a través de la pantalla, sino un poco más cerca del borde del contorno (contenedor) cuando el usuario se desplaza hacia abajo y un poco más cuando el usuario desplaza la página hacia arriba.

Como en esta captura de pantalla:

cómo debe desplazarse

¿Cuál es la mejor manera de hacer eso?