CODEWITHSUNDEEP
javascriptcssanimation
Mohsin
Mohsin

Reputation: 137

Moving image on scroll

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.

Upvotes: 1

Views: 2941

Answers (1)

TerminalVelocity
TerminalVelocity

Reputation: 159

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:

Upvotes: 1

Related Questions