滚动移动图像

Question

所以，实际上，我很不擅长动画，但我正在努力做到这一点。当我从各种来源学习动画效果时，我真的很自豪我的两个动画网站现在正在制作中使用。在3.5天的时间里，我试图实现以下动画

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

要在滚动上移动图像，但在花了很多时间之后，我仍然无法获得所需的输出。我通过css3和js编写了自定义动画，但仍然无法达到预期的效果。请帮助我，让我知道如何在卷轴上实现运动图像。

Answer 1

我强烈建议使用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>

学分和资源：

• (Dixon和Moe(https://dixonandmoe.com/rellax/
• (多诺万·哈钦森(https://cssanimation.rocks/parallax/
• (多诺万·哈钦森(https://codepen.io/donovanh/pen/zwdBzP