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

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的的最大值和滚动起来，他们回到原来的位置。当滚动发生时图像需要移动。

我一直在使用$（窗口）与动画.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>