没有jquery的视差渐变

Parallax fade without jquery

本文关键字：渐变 视差 jquery 没有      更新时间：2023-09-26

我想做一个视差滚动的网站。我有基本的代码，但我希望图像淡出，当我向下滚动到下一个图像，并在它出现在屏幕上。我使用纯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。

不确定这是否是你想要的，但是你需要将你的图像与其他文本分开，否则所有的#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>

相关文章：