Moving image on scroll-CodePudding

So, actually, I'm very bad at animations but I'm trying to be good at that. As I'm learning animations effect from various sources, I'm really proud that two of my animation sites are now being used in production. For 3.5 days I'm trying to implement the following animations

https://www.loom.com/share/6758e946dad7474db2bc5b99b4cd56f3

To move the image on scroll, but after spending a lot of time on it I'm still unable to get the desired output. I wrote my custom animation through css3 and js but was still unable to achieve the desired result. Please, help me and let me know how can I achieve a moving image on scroll.

CodePudding user response：

I strongly recommend utilizing the Rellax JS library.

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 >
  <div ></div>
  <div >
    <div  id="one" data-rellax-speed="4">one</div>
    <div  id="two" data-rellax-speed="-1">two</div>
    <div  id="three" data-rellax-speed="3">three</div>
  </div>
  <div >Child 3</div>
</div>

Credits and Resources:

(Dixon and Moe) https://dixonandmoe.com/rellax/
(Donovan Hutchinson) https://cssanimation.rocks/parallax/
(Donovan Hutchinson) https://codepen.io/donovanh/pen/zwdBzP