滚动图像

Question

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

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

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

Answer 1

我强烈建议使用 Rellax JS 库。

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>

致谢和资源：

（狄克逊和萌）https://dixonandmoe.com/rellax/
（多诺万哈钦森）https://cssanimation.rocks/parallax/
（多诺万哈钦森）https://codepen.io/donovanh/pen/zwdBzP

滚动图像

Moving image on scroll

javascript

css

animation