Question

希望你做得很好。一如既往，非常感谢任何帮助。

我试图弄清楚如何使用页面滚动向上或向下移动图像。

代码：

<div class="container">
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
</div>

当您向下滚动（页面）时，图像将移动到最大10px，然后向上滚动，它们将返回到原始位置。当滚动发生时，图像需要移动。

我尝试使用带有动画的$（window）.scroll，但图片只移动“一次”

这是钢笔 http://codepen.io/_Dawood/pen/aWZNVo

Answer 1

您可以为此代码制作动画或div动画。

它不是一次性动画。它动画查找当前滚动位置。

代码段：滚动位置

var container = document.getElementById('container');
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var scrollArea = 1000 - windowHeight;
var image1 = document.getElementsByClassName('image')[0];
var image2 = document.getElementsByClassName('image')[1];

window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || window.scrollTop;
  var scrollPercent = scrollTop/scrollArea || 0;
  
  image1.style.bottom = scrollPercent*window.innerWidth + 'px';
  image2.style.right = scrollPercent*window.innerWidth + 'px';
});

body {
  overflow-x: hidden;
}

.container {
  width: 100%;
  height: 1000px;
}

.image {
  position: absolute;
  width: 150px;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="imagecontainer">
    <img class="image" src="https://placehold.it/150x150" alt="" />
  </div>
  <div class="imagecontainer">
    <img class="image" src="https://placehold.it/150x150" alt="" />
  </div>
</div>

页面向上或向下滚动时移动图像

1 个答案: