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