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.
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 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>Credits and Resources: