当页面向上或向下滚动时移动图像
问题描述:
希望你做得很好。 一如既往,任何帮助非常感谢。当页面向上或向下滚动时移动图像
我想知道如何通过页面滚动来上下移动图像。
代码:
<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尝试,但图像只能移动“一次”
答
能够绘制图像或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>
我想我已经找到了“工作”的解决方案,如果有人想看看codepen :) – Deedub