Scroll horizontal com a posição do mouse

Eu preciso criar um site com animações parecidas com este: https://www.epicgames.com/roborecall/en-US/home#story

eu consegui criar a perspectiva com background multilayers usando translate, mas nao sei como fazer o scroll acompanhar o mouse, apenas encontrei alguns tutoriais em ingles mas que não são bem o que eu preciso, nao posso mover só o background, mas sim scroll da section inteira. Ou se não for possível, de que outra forma eu consigo esse efeito?
Aqui esta o que eu fiz ate agora: http://www.foxdesign.net.br/animation/
HTML:

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta charset="utf-8"> <title>index</title>  </head>  <body>     <main class="wrapper">         <section class="section bg">             <img class="img2 left" src="images/personagem_0001_personagem3.png"  alt=""/>             <img class="img1 middle" src="images/personagem_0002_Camada-0.png"  alt=""/>             <img class="img2 right" src="images/personagem_0000_personagem4.png" alt=""/>          </section>           <div >             more content          </div>    </main> </body> </html> 

CSS:

@charset "utf-8"; /* CSS Document */ body,html{margin:0;padding:0;}  .wrapper {      width:100%;     height: 100vh;     perspective: 2px;     transform-style: preserve-3d; } .section {     overflow-y: hidden;     position: relative;     text-align: center;     max-width:100%;     width:100%;     height:100vh;     transform-style: inherit;  } .section::before {     width:100%;     background:#000;     content: " ";     position: absolute;     top: 0;     left:0;     bottom: 0;     z-index: -2;     background-size:100% auto;     background-repeat: repeat;     background-position: center center;     transform: translateZ(-0px) scale(1.1) ; } section img{     display:inline;     width:90px;     height:auto;     position:absolute;     bottom:50px; } .img2 {     z-index: -1;     transform: translateZ(0.1px) ; } .img1{     z-index:2;     transform: translateZ(0.3px) ;     left:655px;     bottom:70px; }  .left{     left:560px; } .right{     left:750px; }  .bg::before {   background-image: url("../images/85a0a9e8e8c4b26194029a6588884db8.jpg"); }