當頁面向上或向下滾動時移動圖像

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>