javascript - 没有jquery的视差淡入淡出

Question

我正在尝试制作一个具有视差滚动功能的网站。我有基本代码，但我希望当我向下滚动到下一张图片时图片淡出，当它出现在屏幕上时淡入。我使用的是纯 HTML 和 CSS，没有插件。我应该怎么做？这是我的代码:

#divname {
    background-image: url('http://lorempixel.com/1024/600/abstract/');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
    width: 100vw;
	height: auto;
	background-attachment: fixed;
}

.text {
	background-color: rgba(255, 255, 255, 0.75);
}

.header {
	font-size: 10vw;
}

		<div id="divname">
                <div class="text">
				<p class="header">Headername</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis dictum mi ac euismod. Aenean fermentum nisl ut lorem cursus, in consectetur est eleifend.</p>
			</div>
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

PS:顺便说一下，我可以使用 javascript，但我宁愿不使用 jQuery。

Answer 1

不确定这是不是你想要的，但是您需要将图像与其他文本分开，否则所有#divaname 将在滚动时淡出。

var myDiv = document.getElementById('divname');

function scrolled() {
    
    if (window.pageYOffset < 100) {
        myDiv.style.opacity = 1;
    } else {
        myDiv.style.opacity = 0.3;
    }
}

window.addEventListener('scroll', scrolled);

#divname {
    background-image: url('http://lorempixel.com/1024/600/abstract/');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
    width: 100vw;
	height: auto;
	background-attachment: fixed;
    transition: opacity 1s ease;
}

.text {
	background-color: rgba(255, 255, 255, 0.75);
}

.header {
	font-size: 10vw;
}

    <div id="divname">
                <div class="text">
				<p class="header">Headername</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis dictum mi ac euismod. Aenean fermentum nisl ut lorem cursus, in consectetur est eleifend.</p>
			</div>
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br>