我陷入了视差问题,似乎无法找到我想要的东西。
我的页面顶部有背景图片。我目前有ThreadLocal
所以它有视差效果但是我需要这个图像在页面滚动时滚动? ......现在我被卡住了。
我相信这可以通过JavaScript完成,可能background-position: fixed
,但我不知道从哪里开始。
在我的基本小提琴中,您可以看到视差效果,但我需要在页面滚动时滚动图像。
感谢您的帮助。
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');
}
答案 0 :(得分:1)
此功能将为您完成工作。 (根据您的选择改变速度变量值)
(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;
});
};
})();