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>

视差在没有jquery的情况下褪色

1 个答案: