我陷入了视差问题,似乎找不到我想要的东西。
我的页面顶部有一个背景图片。我目前有background-position: fixed
,所以它具有视差效果,但是我需要此图像在页面滚动时滚动吗? ...现在我被困住了。
我相信可以使用JavaScript以及background-position: scroll
来完成此操作,但我只是不知道从哪里开始。
在我的基本小提琴中,您可以看到视差效果,但是我需要图像随着页面滚动而滚动。
谢谢你的帮助。
.image {
height: 100px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url('http://www.navipedia.net/images/a/a9/Example.jpg');
}
<section>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>
</section>
<div class="image"></div>
<section>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta."</p>
<br><br>
<p>"Sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est."</p>
</section>
最佳答案
此功能将为您完成工作。 (根据您的选择改变速度变量的值)
(function(){
var parallax = document.querySelectorAll(".image"),
speed = 0.5;
window.onscroll = function(){
[].slice.call(parallax).forEach(function(el,i){
var windowYOffset = window.pageYOffset,
elBackgrounPos = "50% " + (windowYOffset * speed) + "px";
el.style.backgroundPosition = elBackgrounPos;
});
};
})();
实际观看:https://jsfiddle.net/ksugkmoh/