console
window.onload = function () {
window.addEventListener('scroll', scrollHandler);
function scrollHandler(e) {
document.querySelectorAll('[data-type=background]').forEach(item => {
var yPos = -(parseInt(document.documentElement.scrollTop) / parseInt(item.dataset.speed));
var coords = '50% ' + yPos + 'px';
item.style.backgroundPosition = coords
})
}
}
<div class="article section1" id="section1" data-speed="10" data-type="background">
每当我加班凌晨,独自一人走在黑暗的回家路上
</div>
<div class="article section2" id"section2" data-speed="20" data-type="background">
我会想起那天夕阳下的奔跑
</div>
.article{
width: 960px;
margin: 0 auto;
height: 800px;
padding: 40px;
font: 24px/1.5 'Microsoft YaHei';
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0;
line-height:400px;
}
.section1{
background-size: 960px 900px;
color: white;
background-image: url(https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF);
}
.section2{
background-size: 960px 1000px;
color: #FF8500;
background-image: url( https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF);
}