Entonces, en realidad, soy muy malo con las animaciones, pero trato de ser bueno en eso. Como estoy aprendiendo el efecto de las animaciones de varias fuentes, estoy muy orgulloso de que dos de mis sitios de animación ahora se estén usando en producción. Durante 3,5 días estoy tratando de implementar las siguientes animaciones
https://www.loom.com/share/6758e946dad7474db2bc5b99b4cd56f3
Para mover la imagen en el desplazamiento, pero después de pasar mucho tiempo en ella, todavía no puedo obtener el resultado deseado. Escribí mi animación personalizada a través de css3 y js, pero aún no pude lograr el resultado deseado. Por favor, ayúdenme y háganme saber cómo puedo lograr una imagen en movimiento en el desplazamiento.
Recomiendo encarecidamente utilizar la biblioteca Rellax JS .
https://codepen.io/gcwebdev/pen/BaJjweE
var rellax = new Rellax('.rellax'); body { padding: 4rem; background-color: #282828; height: 500vh; } .parent { margin-top: 15em; color: white; position: relative; display: flex; justify-content: center; align-items: center; } .parent>div { position: absolute; top: 0; } .child1 { width: 40vw; height: 80vh; background-color: white; border-radius: 3em; } .child2>div { background-color: #999; border-radius: 1em; position: absolute; } .child2-one { width: 200px; height: 100px; top: 70px; left: 100px; } .child2-two { width: 200px; height: 250px; top: 250px; left: 175px; } .child2-three { width: 100px; height: 75px; top: 500px; left: -250px; } <link href="https://cssanimation.rocks/levelup/public/03/04-end/stylesheets/main.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.0.0/rellax.min.js"></script> <div class="parent"> <div class="child1"></div> <div class="child2"> <div class="child2-one rellax" id="one" data-rellax-speed="4">one</div> <div class="child2-two rellax" id="two" data-rellax-speed="-1">two</div> <div class="child2-three rellax" id="three" data-rellax-speed="3">three</div> </div> <div class="child3">Child 3</div> </div>Créditos y Recursos: