这是我的 html 和 css 代码片段:
.clouds {
background-image: url('http://placehold.it/1200x1200');
background-repeat: no-repeat;
display: block;
}
.cloud-1 {
width: 138px;
height: 83px;
position: absolute;
left: 200px;
top: 350px;
}
.cloud-2 {
width: 100px;
height: 52px;
position: absolute;
left: 625px;
top: 400px;
background-position: -935px -9px;
}
.cloud-3 {
width: 110px;
height: 58px;
position: absolute;
left: 450px;
top: 350px;
background-position: -1033px -6px;
}
<div id="animations">
<div class="clouds cloud-1"></div>
<div class="clouds cloud-2"></div>
<div class="clouds cloud-3"></div>
<div class="clouds cloud-4"></div>
<div class="clouds cloud-5"></div>
<div class="clouds cloud-6"></div>
<div class="clouds cloud-7"></div>
<div class="clouds cloud-8"></div>
<div class="clouds cloud-9"></div>
<div class="clouds cloud-10"></div>
<div class="clouds cloud-11"></div>
<div class="clouds cloud-12"></div>
<div class="clouds cloud-13"></div>
</div>
我想要实现的是在用户向下滚动时将云移到网站边缘。我的云是一个图像 Sprite ,每个云都是绝对定位的。抱歉,我是网络开发的新手,还需要学习很多东西。
最佳答案
我认为这最好通过 Javascript 实现。通过使用 JQuery,这应该不会太难。
首先检查你滚动了多远:
var scrollPercent = 100 * $('body').scrollTop() / ($('body).height()
这为您提供了向下滚动的百分比。然后,您可以执行以下操作:
$('.cloud-1').css('left', (200 / scrollPercent) + 'px');
这会将图像设置为从左开始 200 px
,如果用户在页面下方,则向左 2 px
。
滚动时更新这些值:
$('body').on('scroll', function(){
// methods described above here
}
注意
代码未经测试,它是正确方向的提示。根据您的需要进行调整,并查看 jquery文档。
关于javascript - 如何在鼠标滚动上移动元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37589382/